javascript - Jquery 脚本没有反应

Question

关于 this site我有以下 jQuery 函数。但是没 react ？

它应该向 <header id="navbar"> 添加和删除 CSS 类向下滚动 150 像素后。

有人知道怎么回事吗？

var fixed = 0;
function toggleNavbar() {
    if ($(window).scrollTop() > (150)) {
        if (fixed == 0) {
            fixed = 1;
            $("#navbar").addClass("navbar-fixed-top").css({opacity: 0,top: -30}).animate({opacity: 1,top: 0}, 200, function() {
            });
            $("#navbar").addClass("websiteHeaderSticky");
            $("#navbar").removeClass("websiteHeader");
        }
    }
    if ($(window).scrollTop() < (150)) {
        if (fixed == 1) {
            fixed = 0;
            $("#navbar").animate({opacity: 0,top: -30}, 200, function() {
                $("#navbar").removeClass("navbar-fixed-top");
                $("#navbar").removeClass("websiteHeaderSticky");
                $("#navbar").addClass("websiteHeader").animate({opacity: 1,top: 0}, 300);
            });
        }
    }
}

Answer 1

尝试(更多:http://api.jquery.com/scroll/):

   jQuery( window ).scroll(function() {
      toggleNavbar(); 
   });

我不知道为什么，但是 $ 没有在你的页面上定义，使用 jQuery 引用工作正常。

您也可以将您的 js 修复为:

var fixed = 0;
function toggleNavbar() {
    if (jQuery(window).scrollTop() > (150)) {
        if (fixed == 0) {
            fixed = 1;
            jQuery("#navbar").addClass("navbar-fixed-top").css({
                opacity: 0,
                top: -30
            }).animate({
                opacity: 1,
                top: 0
            }, 200, function() {});
            jQuery("#navbar").addClass("websiteHeaderSticky");
            jQuery("#navbar").removeClass("websiteHeader");
        }
    }
    if (jQuery(window).scrollTop() < (150)) {
        if (fixed == 1) {
            fixed = 0;
            jQuery("#navbar").animate({
                opacity: 0,
                top: -30
            }, 200, function() {
                jQuery("#navbar").removeClass("navbar-fixed-top");
                jQuery("#navbar").removeClass("websiteHeaderSticky");
                jQuery("#navbar").addClass("websiteHeader").animate({
                    opacity: 1,
                    top: 0
                }, 300);
            });
        }
    }
}

jQuery(window).scroll(function() {

     toggleNavbar(); 
});