我有一个我正在处理的粘性导航,我能够从其他一些帖子中收集一些代码,但是我遇到了一个问题,滚动后我隐藏的导航区域在滚动到页面顶部时不会显示回来。我试图写一个 else if 语句,但没有运气,谢谢。
$(window).scroll(function(){
if($("#navheader").offset().top <= $(window).scrollTop)
$("#navheader").css({"display":"block","top":"0px", "left":"0px"});
else
$("#navheader").css({"display":"none"});
});
这可能更容易
看起来问题是您需要在window
scrollTop
后()
.
var n = $("#navheader");//get nav
var nh = n.offset().top;//get nav offset
var go = true;//toggle execute so it doesn't fire on every match
$(window).scroll(function(){
var wh = $(this).scrollTop();//window scroll
if(wh <= nh && !go) {//show
n.show();
go = true;
} else if (wh > nh && go) {//hide
n.hide();
go = false;
}
});
做了一个小提琴:http://jsfiddle.net/filever10/cxJ6a/
编辑:添加了一个go
切换开关,以在 if/then 的每场比赛中停止射击。 这样它每个方向发射一次。
如果您控制台.log:
console.log($("#navheader").offset().top)
在滚动事件中,您将看到一旦 IF 语句变为 true,它将始终返回 0。由于元素是固定的并且它有 top: 0,它将始终具有 0。
你问的解决方案是什么?
创建最关闭的全局变量并检查它。
var navOff = $("#navheader").offset().top;
$(window).scroll(function(){
if(navOff <= $(window).scrollTop())
$("#navheader").css({"display":"block","top":"0px", "left":"0px"});
else
$("#navheader").css({"display":"none"});
});
但是由于您的 $("#navheader") 可能设置为显示:none ,即使这样它也可能会返回 0...
所以你有几个选择。
- 制作一些导航支架并瞄准它。
- 对值进行硬编码。
- 使其可见:隐藏; 而不是显示:无;(这样你就可以瞄准最讨厌的人)