Javascript更改CSS元素

Question

我正在按照本教程进行操作 ，试图使我的网站导航栏在到达页面顶部时始终停留在页面顶部。 我无法使其按照他们的设置方式进行工作，因此我尝试以其他方式进行设置，但仍然无法使其正常工作。 我将此代码放在body标签的末尾，以尝试使此工作有效（导航栏的CSS ID为“ navbar”）：

jQuery的

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

我有什么想念的吗？

提前致谢，

布兰登

编辑：

我要感谢大家的快速回复，并为我对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

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

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>