0

我正在处理一个粘性导航，我能够从其他一些帖子中收集一些代码，但是我遇到了一个问题，滚动后我隐藏的导航区域在滚动到时不会显示回来页面顶部。我试图写一个 else if 语句，但没有运气，谢谢。

  $(window).scroll(function(){
    if($("#navheader").offset().top <= $(window).scrollTop)
    $("#navheader").css({"display":"block","top":"0px", "left":"0px"});
    else
    $("#navheader").css({"display":"none"});
  });
4

2 回答 2

0

这可能更容易

看起来问题是你需要一个()after scrollTopon window。

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 的每场比赛中停止射击。这样，它每路触发一次。

于 2013-11-04T20:37:22.433 回答
0

如果你控制台.log：

console.log($("#navheader").offset().top)

在滚动事件中，您将看到一旦 IF 语句变为 true，它将始终返回 0。由于元素是固定的并且它具有 top: 0，因此它将始终具有 0。

你问的解决方案？

制作 offest 全局变量并检查它。

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") 可能设置为 display: none 并且即使这样它也可能返回 0 ...

所以你有几个选择。

  1. 做一些导航的持有者并瞄准它。
  2. 硬编码值。
  3. 使其可见性：隐藏；而不是显示：无；（这样你就可以瞄准offest）
于 2013-11-04T20:31:59.697 回答