Question

我正在关注this tutorial，尝试让我的网站导航栏在到达页面顶部时粘在页面顶部。我无法按照它们设置的方式使用它，所以我尝试以不同的方式设置它仍然无法让它工作。我将此代码放在我的body标签的末尾以尝试使其工作（导航栏的css id为“navbar”）：

的jQuery

if ($document).scrolltop() > 132){
  $("#navbar").css("position", "fixed");
  $("#navbar").css("top", "132px");
}
else{
  $("navbar").css("position","static");
}

我有什么遗失的吗？

提前致谢，

Bradon

编辑：

我要感谢大家的快速回复，并道歉，因为我不熟悉javascript和stackoverflow。我试图实现一些建议的解决方案，这就是我现在所拥有的：

<script type="text/javascript">
            var navbar = $("#navbar");
            navbar.on("scroll", function(e){
                if (navbar.scrollTop() <= 0){
                    navbar.css("position", "fixed");
                    navbar.css("top", "0px");
                }
                else{
                    navbar.css("position","static");
                }
            });
</script>

我仍然无法让它正常工作。

编辑2：

我要感谢大家的帮助，没有你们，我无法想象出来。这是我用过的代码，如果有人需要的话：

<script type="text/javascript">
            var navbar = jQuery("#navbar");
            jQuery(document).on("scroll", function(e){
                if (jQuery(document).scrollTop() > 280){
                    navbar.css("position", "fixed");
                    navbar.css("top", "0px");
                }
                else{
                    navbar.css("position","static");
                    navbar.css("top", "auto");
                }
            });
</script>

这个脚本假定你想要顶住的东西有一个“navbar”类。我的问题是wordpress不接受jquery中的$所以我用jQuery替换它。再次感谢大家！

Answer 1

在页面加载时，您的滚动顶部检查只发生一次，这是一个更大的问题。在原始教程中，检查scrolltop的代码设置为每次发生滚动事件时执行：

wrap = $('#wrap');

wrap.on("scroll", function(e) {

  if (this.scrollTop > 147) {
    wrap.addClass("fix-search");
  } else {
    wrap.removeClass("fix-search");
  }

});

“wrap.on（'scroll'）”部分非常关键，因为这会导致每当滚动div时都会触发“scrolltop”值检查。

Answer 2

我认为语法错误。 document.scrollTop上的缺少括号，并且还错过了导航栏上的＃符号。

<script type="text/javascript">
            if ( $(document).scrollTop() > 132){
                $("#navbar").css("position", "fixed");
                $("#navbar").css("top", "132px");
            }
            else{
                $("#navbar").css("position","static");
            }
</script>

Javascript更改Css元素

2 个答案: