jQuery脚本没有反应

debugcn 发表于 Dev

梅兹

在这个网站上，我有下面的jQuery函数。但是它没有反应吗？

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

有人知道怎么了吗？

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);
            });
        }
    }
}

古尔布伦

试试（更多：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(); 
});