slideToggle 连续上下动画 div

Question

我正在使用 slideToggle 使我的 header 在 scrollTop 达到 100 时随页面移动。但是一旦滚动条达到 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，则滑动 header，否则进行其他 class 切换。

假设他们滚动到 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

slideToggle is animating the div up and down continuously

javascript

jquery

html

slidetoggle