转换速度取决于滚动速度

Question

我做了一个顶部导航，转换为1，在滚动＆gt; = 300后重新出现。我的jQuery看起来如下： $（window）.scroll（function（）{    var scroll = $（window）.scrollTop（）;    if（scroll＆gt; = 100＆amp;＆amp; scroll＆lt; 300）{        $（“＃navbar”）。css（{“top”：“ - 50px”，“transition”：“1s ease-out”}）;        $（ “＃导航栏”）removeClass（ '导航栏静态顶'）。     }     否则if（scroll＆gt; = 300）     {        $（ “＃导航栏”）addClass（ 'Navbar的固​​定顶'）;        $（“＃navbar”）。css（{“top”：“0px”，“box-shadow”：“0 2px 15px 0 rgba（0,0,0,0.4）”}）;        $（“#topsection”）。css（“padding-top”，“50px”）;     }     否则if（滚动＆lt; 100）{       $（“＃navbar”）。css（{“top”：“0px”，“transition”：“0s ease”，“box-shadow”：“0 0px 0px 0 rgba（0,0,0,0.4）” }）;       $（ “＃导航栏”）addClass（ '导航栏静态顶'）。       $（ “＃导航栏”）removeClass（ 'Navbar的固​​定顶'）;       $（“#topsection”）。css（“padding-top”，“0px”）;     } }） 不幸的是，当我滚动得更快时，似乎转换速度更快，与我滚动速度相反时相反。我真的希望它独立于我的滚动速度。我如何实现这一目标？为什么这样做呢？

Answer 1

滚动速度越快，滚动事件就越多 如果你想独立于滚动速度，你应该使用像code1这样的滚动速度或使用像code2这样的超时。

代码1：

$(window).on( 'mousewheel DOMMouseScroll', function ( e ) {
  var e0 = e.originalEvent,
    delta = e0.wheelDelta || -e0.detail;
  //delta is scroll speed!

  //~~
});

代码2：

var isFiring = false;
var interval = 200; // bigger makes slower
$(window).scroll(function(){
  if(isFiring) return;
  setTimeout(function(){
    isFiring = false;
  }, interval)
  isFiring = true;

  //~~
});