基本上,一旦 NAV 下的#CONTENT DIV到达窗口顶部,我希望我的导航栏保持在窗口顶部位置:固定 .
HTML 是
<header>
Which is full screen size: 100% x 100%
</header>
<nav>
</nav>
<div id="content">
<section>
</section>
<footer>
</footer>
</div>
在这里您可以找到演示http://jsfiddle.net/dcdeiv/aG6DK/2/ 除了 jQuery 代码之外,一切都工作正常。
我尝试在滚动时根据 #contentDiv 的高度值的返回创建一个变量。我想使用该变量在 #contentDiv 到达窗口顶部时立即使 NAV 淡入或淡出,但它不起作用
$(document).scroll(function () {
var x = $('#content').scrolltop();
if (x = 0) {
$('nav').fadeIn().css({"position":"fixed","top":"0"});
} else {
$('nav').fadeOut();
}
});
你能帮我一下吗? 这是我第一次使用 jQuery,所以请宽容并解释我所有的错误!
加上我是意大利人,所以不要成为语法纳粹!哈哈
谢谢。
最佳答案
这是我需要工作的代码:
$(document).ready(function() {
$(document).scroll(function () {
var scroll = $(this).scrollTop();
var topDist = $("#container").position();
if (scroll > topDist.top) {
$('nav').css({"position":"fixed","top":"0"});
} else {
$('nav').css({"position":"static","top":"auto"});
}
});
});
以下是语法错误:
- .scrolltop() 应该是 .scrollTop()
- if(x = 0) 应该是 if(x == 0) (或者不是,请参见上面的代码)
此外,在 jsfiddle 中,您必须在左上角指定一个库才能使 jQuery 工作。
你的逻辑还需要一点帮助。
- .scrollTop() 只获取页面滚动条的位置。这意味着它从 0 开始。因此,一旦用户尝试滚动,您的代码就会将导航粘到顶部。
- 我们需要导航在到达顶部后保持不变,因此我们需要知道它距离顶部有多远。 var topDist = $("#container").position();创建一个同时具有容器的“top”和“left”属性的对象。然后我们可以通过 topDist.top 检索顶部。
- 现在我们已经知道了滚动位置 (.scrollTop) 以及“nav”在页面下方的距离,我们可以比较两者,然后运行您的原始操作。
顺便说一句,fadeIn() 和 fadeOut() 并不是真正必要的。我不太确定你想要完成什么,但你可以忽略它们。
关于jQuery 位置 :Fixed 'NAVBAR' by scrolling the page,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22187317/