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

Sticky Nav element - hide then show

本文关键字：隐藏 然后 显示 元素 导航      更新时间：2023-09-26

我有一个我正在处理的粘性导航，我能够从其他一些帖子中收集一些代码，但是我遇到了一个问题，滚动后我隐藏的导航区域在滚动到页面顶部时不会显示回来。我试图写一个 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...

所以你有几个选择。

  1. 制作一些导航支架并瞄准它。
  2. 对值进行硬编码。
  3. 使其可见：隐藏; 而不是显示：无;（这样你就可以瞄准最讨厌的人）
相关文章：