javascript - 固定标题 - 向下滚动时停止动画，停止滚动时继续

Question

我为我的网站创建了一个固定菜单。

一切正常，问题是；

当我向下滚动时，一旦固定菜单开始播放动画，如果我向下滚动得更快，它就会停止，当我停止向下滚动时，动画会继续播放，直到它被固定。

JS在下面；

function init() {
        window.addEventListener("scroll", function() {
            var topbar = $("#topbar"),
                header = $("#header-main"),
                hdr_img = $("#header-main .inner img"),
                hdr_inner = $("#header-main .inner"),
                search = $("#search"),
                cart = $("#cart");
            $(window).width() > 1200 && ($(this).scrollTop() > 235 ? (header.addClass("sabit"), hdr_inner.addClass("sabit"), search.addClass("sabit"), cart.addClass("sabit"), hdr_img.addClass("sabit"), topbar.addClass("sabit"), header.stop().animate({
                top: "-44px",
                opacity: 1
            }, 800), topbar.stop().animate({
                top: "-44px",
                opacity: 0
            }, 900)) : $(this).scrollTop() < 1 && (header.stop().animate({
                top: "0px",
                opacity: 1
            }, 800), topbar.stop().animate({
                top: "0",
                opacity: 1
            }, 1300), header.removeClass("sabit"), hdr_inner.removeClass("sabit"), search.removeClass("sabit"), cart.removeClass("sabit"), hdr_img.removeClass("sabit"), topbar.removeClass("sabit")))
        })
    }
    window.onload = init();

下面还有CSS代码；

#topbar {
  color: #7BBD42;
  background: #2e3a47;
  background-image: url("//images....com./sprites/kullanicimenupat.png");
  padding: 5px 0;
  min-height: 30px;
  border-bottom: 1px solid #7bbd42;
  border-width: 3px;
}
#topbar.sabit {
position: fixed;
width: 100%;
z-index: 99;
top: 0;
}

#header-main {
  background-color: #ffffff;
  min-height: 107px;
  color: #8c8c8c;
}
#header-main.sabit{
position : fixed;
width: 100%;
z-index: 1010;
padding-top: 35px;
border-bottom: 1px solid #AFC999;
min-height: 100px;
min-height: 99px;
background: rgba(255,255,255,1);
background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(245,245,245,1) 47%, rgba(237,237,237,1) 93%, rgba(237,237,237,1) 99%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,255,255,1)), color-stop(47%, rgba(245,245,245,1)), color-stop(93%, rgba(237,237,237,1)), color-stop(99%, rgba(237,237,237,1)));
background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(245,245,245,1) 47%, rgba(237,237,237,1) 93%, rgba(237,237,237,1) 99%);
background: -o-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(245,245,245,1) 47%, rgba(237,237,237,1) 93%, rgba(237,237,237,1) 99%);
background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(245,245,245,1) 47%, rgba(237,237,237,1) 93%, rgba(237,237,237,1) 99%);
background: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(245,245,245,1) 47%, rgba(237,237,237,1) 93%, rgba(237,237,237,1) 99%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed', GradientType=0 );
}

#header-main .inner {
  text-align: left;
  margin-top: 25px;
  padding: 0;

#header-main .logo img {
  /*background-color: #7bbd42;*/
  transition: all 0.4s ease-in 0s;
}
#header-main .inner.sabit{
margin-bottom: -15px;
margin-top: 18px;
}
#header-main .inner.sabit img {
  max-width: 75%;
  margin-top: -4px;
  transition: all 0.5s ease 0s;
}

Answer 1

在滚动事件中使用 setTimeout:

var timerX = -1;
$(window).on('scroll', function () {
    clearTimeout(timerX);
    timnetToChangVp  = setTimeout(function() {
        init();
    }, 200);
});