固定菜单位置的Javascript Scrolltop
Javascript Scrolltop for fixed menu position
我想在javascript中滚动几个像素后粘贴菜单栏,但它不能正常工作。这是我的剧本
JavaScript代码:
window.onscroll = function() {stick()};
function stick() {
if (document.body.scrollTop || document.documentElement.scrollTop > 150) {
document.getElementById("test").style.position = "fixed";
document.getElementById("test").style.background = "blue";
} else {
document.getElementById("test").style.position = "initial";
}
}
问题:
每当我滚动哪怕一个像素,我的测试id都会被修复。我试图在if中更改scrollTop值,但没有任何效果。如有任何关注,我们将不胜感激。
更新:这里还有使用id的错误。
<script>
document.getElementById("cntnr").onscroll = function() {stick()};
function stick() {
if (document.getElementById("cntnr").scrollTop > 119) {
document.getElementById("navdwn").style.position = "fixed";
} else {
document.getElementById("navdwn").style.position = "initial";
}
}
</script>
验证您的If
条件,以修复滚动到150px顶部的菜单当前文档
更改:
window.onscroll = function() {stick()};
function stick() {
if (document.body.scrollTop > 150 ) {
document.getElementById("test").style.position = "fixed";
document.getElementById("test").style.background = "blue";
} else {
document.getElementById("test").style.position = "initial";
}
}
一旦开始滚动,document.body.scrollTop
的值就会大于0
。如果第一个条件为true,则OR运算符不会检查第二个条件。
因此,一旦开始滚动,第一个条件就会变为true,然后测试id就会得到修复。
将条件更改为if (document.body.scrollTop > 150 ) {....
,它将起作用。
尝试一下这段代码,您需要javascript的parseInt()函数来document.documentElement.scrollTop
等于整数
window.onscroll = function() {stick()};
var offset = document.documentElement.scrollTop
function stick() {
if (parseInt(offset) > 150) {
document.getElementById("test").style.position = "fixed";
document.getElementById("test").style.background = "blue";
} else {
document.getElementById("test").style.position = "initial";
}
}
相关文章:
- javascript:scrollTop和offsetTop之间的区别
- Javascript Window.ScrollTop() Chrome Not Working
- 否则,如果不在带有scrollTop的Javascript中工作
- ScrollTop Javascript 在 Firefox 中不起作用
- 如何通过像jquery这样的JavaScript设置Scrolltop
- 纯Javascript,如何检测scrollTop是否会滚动到页面底部
- 通过Submit发送SCROLLTOP javascript
- JavaScript中关于scrollTop的问题
- javascript动画ScrollTop随机工作
- scrollTop为javascript中的所有文档元素返回0,但滚动事件在body标记上触发
- 无法使$(window).scrollTop()javascript正常工作
- jQuery/Javascript:所有浏览器中的scrollTop值
- 固定菜单位置的Javascript Scrolltop
- 使用javascript scrollTop函数时,选择框关闭
- Javascript/jQuery scrollTop issue
- Javascript中的scrolltop++循环
- javascript/jQuery中scroll和scrollTop的区别
- Javascript ScrollTop效果是't工作
- Javascript - Scrolltop() Method
- 修改基本的 JavaScript ScrollTop 函数