Question

一旦scrollTop达到100，我使用slideToggle让我的标题随页面一起移动。但是一旦滚动条达到100或更多，它会保持动画上下几分钟。这是我的代码：

$(window).scroll(function(){
   var ScrollTop    = $(window).scrollTop();
   if(ScrollTop>=100){
       $('#main_header').removeClass("relative");
       $('#main_header').addClass("fixed");
       $('#main_header').slideToggle("slow");
   }else if(ScrollTop<=99){
       $('#main_header').removeClass("fixed");
       $('#main_header').addClass("relative");
   }
});

请让我知道什么是错的？

Answer 1

您在浏览器中说，只要用户向下滚动页面，就会看到他们走了多远。如果他们已经旅行超过99，然后滑动该标题，否则做其他类翻转。

所以，让我们说它们滚动到120，它会滑动。然后他们向下滚动到140，它会滑动。你没有检查它是否已经滑落，因此它将继续这样做。一个简单的方法是添加一个布尔值： -

var toggled = false;

$(window).scroll(function () {
   var ScrollTop = $(window).scrollTop();

   if (ScrollTop >= 100 && !toggled) {
       $('#main_header')
           .removeClass("relative")
           .addClass("fixed")
           .stop() // stop any prev animation
           .css('display', 'none') // force hide so it slides
           .slideToggle("slow");

       toggled = true; // won't enter again until set to false
   } else if (ScrollTop <= 99 && toggled) {
       $('#main_header').removeClass("fixed");
       $('#main_header').addClass("relative");

       toggled = false; // scrolled back up, can now slideToggle again!
   }
});

Answer 2

使用jQuery .stop()方法：

$(window).scroll(function(){
    var ScrollTop    = $(window).scrollTop();
    if(ScrollTop>=100) {
        $('#main_header').removeClass("relative");
        $('#main_header').addClass("fixed");
        $('#main_header').stop(true).slideToggle("slow");
    } else if(ScrollTop<=99) {
        $('#main_header').removeClass("fixed");
        $('#main_header').addClass("relative");
    }
});

slideToggle不断地为div上下动画

2 个答案: