javascript - 使用 lodash updatePosition 不起作用

Question

你好，我是第一次使用 lodash。我的 jquery 代码不断跳转，我试图将它迁移到 lodash 函数中，但我真的不明白该怎么做。

IDK 如果这很重要，但代码背后的主要思想是让 div 向下滚动到某个位置并捕捉到某个位置，但它一直在跳跃。请指教 !!

$(window).on('scroll', _.throttle(updatePosition, 100));

$(window).on('scroll', function(){
    var scroll = $(window).scrollTop();

    var sectionPosTop = document.getElementById('header-bamboo-scroll').getBoundingClientRect();

    var headerHeight = document.getElementById('header').getBoundingClientRect();


    if (scroll >= 660 && scroll <= 680 ) {
        console.log('greater than 660 and less than 680');
        $('html, body').animate({
            scrollTop: headerHeight.height
         }, 500, function() {
            $('html, body').stop();
         });
    }

 });
});

Answer 1

我不明白你到底想做什么，但你可以使用 _.throttle 来获得代码执行之间的延迟，这可以给你一个流畅的动画。您可以调整延迟时间(以毫秒为单位)以获得您想要的结果。

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

      var sectionPosTop = document.getElementById('header-bamboo-scroll').getBoundingClientRect();

      var headerHeight = document.getElementById('header').getBoundingClientRect();


      if (scroll >= 660 && scroll <= 680 ) {
        console.log('greater than 660 and less than 680');
        $('html, body').animate({
          scrollTop: headerHeight.height
        }, 500, function() {
          $('html, body').stop();
        });
      }
    }

    $(window).on('scroll', _.throttle(updatePosition, 100));