Debounce jquery滚动事件 [英] Debounce jquery scroll events

问题描述

我只有一个关于去抖动的一般性问题。我在页面上的不同位置有三个菜单，当它们在滚动时从窗口顶部到达85px的位置时它们变得固定。当它们到达顶部时，它们分层重叠。我目前每个人都有一个功能，我希望尽可能地优化。我的阅读表明.offset.top计算非常费力。

I just have a general question about debouncing. I have three menus at different positions on the page that when they reach a position 85px from the top of the window on scroll they become fixed. They are layered to overlap as they reach the top. I currently have a function for each and am looking to optimise as much as possible. My reading indicates the .offset.top calculation is quite taxing.

我的问题是：我是否过度思考它，是否有必要在这种情况下去抖？如果我的解释是正确的，则在滚动时不断执行三个偏移计算。任何人都可以建议优化或交替解释为什么它不是必要的。

My question is: Am I overthinking it and is it necessary to debounce in this case? If my interpretation is right the three offset calculations are performed constantly on scroll. Can anyone suggest an optimisation or alterntively explain why it is not neccesary.

谢谢。

$(function(){
    // Check the initial Position of the fixed_nav_container
    var stickyHeaderTop0 = $('.fixed_heading_shop').offset().top;

    $(window).scroll(function(){
            if( $(window).scrollTop() > stickyHeaderTop0-85) {
                    $('.fixed_heading_shop').css({position: 'fixed', top: '85px'});  
                    $('.ghost_div0').css({display: 'block'});
            } else {
                    $('.fixed_heading_shop').css({position: 'relative', top: '0px'});
                    $('.ghost_div0').css({display: 'none'});
            }   

    });

  }); 


$(function(){
    // Check the initial Position of the fixed_nav_container
    var stickyHeaderTop1 = $('.fixed_heading_pricetable').offset().top;

     $(window).scroll(function(){
            if( $(window).scrollTop() > stickyHeaderTop1-85 ) {
                    $('.fixed_heading_pricetable').css({position: 'fixed', top: '85px'});  
                    $('.ghost_div1').css({display: 'block'});       
            } else {
                    $('.fixed_heading_pricetable').css({position: 'relative', top: '0px'});
                    $('.ghost_div1').css({display: 'none'});    
            }
         });

}); 



$(function(){
    // Check the initial Position of the fixed_nav_container
    var stickyHeaderTop2 = $('.fixed_heading_layout').offset().top;
     $(window).scroll(function(){    
            if( $(window).scrollTop() > stickyHeaderTop2-85) {
                    $('.fixed_heading_layout').css({position: 'fixed', top: '85px'});  
                    $('.ghost_div2').css({display: 'block'});
            } else {
                    $('.fixed_heading_layout').css({position: 'relative', top: '0px'});
                    $('.ghost_div2').css({display: 'none'});
            }
          });

}); 

推荐答案

对于这种情况，我认为这真的是一个问题偏爱。看看网站在您给定的情况下如何响应，并在您认为用户体验受到负面影响时进行调整。我倾向于限制/去抖动滚动事件。

For this case, I think it's really a matter of preference. Take a look at how the site responds in your given situation, and make adjustments if you feel the user experience is negatively affected. I tend to throttle/debounce scroll events.

您可以采取一些措施来加速滚动处理程序（略）。例如，如果你可以使用id，就像jQuery的优化选择器指南一样，例如 $（'＃myElement'）很快，因为它使用 document.getElementById 。

There are a few things you can do to speed up your scroll handlers (slightly). If you can use id's, for example, as in jQuery's guide to optimizing selectors, e.g. $('#myElement') is fast because it uses document.getElementById.

如果您担心性能，可以进行更多小调整：如果不需要呼叫，请不要拨打任何电话来调整css。即如果自上次触发滚动处理程序后没有任何更改。 （参见 isFixed boolean）

More minor adjustments if you're worried about performance: Don't make any calls to adjust css if no call is needed. i.e. if nothing changed since the last time the scroll handler was fired. (See isFixed boolean)

$(function(){
  var OFFSET = 85;
  var WAIT = 10;

  // Check the initial Position of the fixed_nav_container
  var stickyHeaderTop0 = $('.fixed_heading_shop').offset().top;
  var isFixed = false; // assuming that's the right default value

  $(window).scroll(_.throttle(function(){
    if($(window).scrollTop() > stickyHeaderTop0 - OFFSET) {
      if(!isFixed) {
        $('#fixed_heading_shop').css({position: 'fixed', top: OFFSET+'px'});
        $('#ghost_div0').css({display: 'block'});
        isFixed = true;
      }
    }
    else {
      if(isFixed) {
        $('#fixed_heading_shop').css({position: 'relative', top: '0px'});
        $('#ghost_div0').css({display: 'none'});
        isFixed = false;
      }
    }
  }, WAIT));
});

唯一重复的电话是 $（窗口）.scrollTop（）如果您可以组合所有滚动处理程序（3？），那么每个[throttled]滚动事件只需要调用一次。

The only repeated call is $(window).scrollTop() and if you can combine all your scroll handlers (3?) then you would only need to make that call once per [throttled] scroll event.

这篇关于Debounce jquery滚动事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！