Jquery脚本没有反应

时间：2014-11-18 07:53:04

标签： javascript jquery css

在this site上我有jQuery函数。但它没有反应？

在向下滚动150px后，它应该向<header id="navbar">添加和删除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);
            });
        }
    }
}

4 个答案:

答案 0 :(得分：0)

在http://litebook.eu/sites/all/themes/litebook/js/fixed-menu-scroll.js?nf85nr文件中尝试此操作：

jQuery("document").ready(function($) {

    var fixed = 0;
        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);
                });
            }
        }

});

答案 1 :(得分：0)

这样的事情应该这样做。

在文档就绪时调用

navScroller，然后将滚动事件绑定到$（窗口）。滚动时会调用ProcessScroll。 

var APP = APP || {};
APP.header = (function () {

    return {
        navScroller: function() {
            var $win = $(window),
                navTop = 150,
                isFixed = 0;

            processScroll();

            $win.on('scroll', processScroll);

            function processScroll() {
                var scrollTop = $win.scrollTop();
                if (scrollTop > navTop && !isFixed) {
                    isFixed = 1;
                    $("#navbar").addClass("navbar-fixed-top").css({opacity: 0,top: -30}).animate({opacity: 1,top: 0}, 200, function() {});
                    $("#navbar").addClass("websiteHeaderSticky");
                    $("#navbar").removeClass("websiteHeader");
                } else if (scrollTop < navTop && isFixed) {
                    isFixed = 0;
                    $("#navbar").removeClass("navbar-fixed-top");
                    $("#navbar").removeClass("websiteHeaderSticky");
                    $("#navbar").addClass("websiteHeader").animate({opacity: 1,top: 0}, 300);
                }
            }
        }
    }
})();

$(function () {
    APP.header.navScroller();
});

答案 2 :(得分：0)

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

答案 3 :(得分：0)

演示 - http://jsfiddle.net/victor_007/gu531aay/2/

在window.scroll

中编写您的函数 
var num = 150;

$(window).on('scroll', function () {
    if ($(window).scrollTop() > num) {
        $('#topSmallNav').addClass('showtopbar');
    } else {
        $('#topSmallNav').removeClass('showtopbar');
    }
});

＆＃13;
＆＃13; 
    var num = 150;

    $(window).on('scroll', function() {
      if ($(window).scrollTop() > num) {
        $('#topSmallNav').addClass('showtopbar');
      } else {
        $('#topSmallNav').removeClass('showtopbar');
      }
    });
＆＃13; 
* {
  margin: 0;
  padding: 0;
}
#topSmallNav {
  background: red;
  height: 50px;
  width: 100%;
}
#topSmallNav.showtopbar {
  display: block;
  background: green;
  position: fixed;
  z-index: 2;
  top: 0;
  left: 0;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="topSmallNav"><a href="#">fafa</a>

</div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis,
  sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis,
  sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis,
  sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis,
  sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis,
  sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis,
  sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis,
  sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis,
  sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis,
  sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis,
  sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede</p>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题