Question

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

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

Answer 1

如果你是console.log：

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

在scroll事件中，您将看到一旦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 ......

所以你有几个选择。

制作一些导航持有者并将其作为目标。
硬编码值。
让它可见：隐藏;而不是display：none; （这样你可以定位offest）

Answer 2

这可能会更容易

看来问题是() scrollTop之后您需要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的每场比赛中停止。这样每次都会发射一次。

粘性导航元素 - 隐藏然后显示

2 个答案: