javascript - jquery スクロール イベントのデバウンス

Question

デバウンスについて一般的な質問があります。ページの異なる位置に 3 つのメニューがあり、スクロール時にウィンドウの上部から 85px の位置に到達すると固定されます。それらは、上に達すると重なるように層になっています。現在、それぞれに関数があり、可能な限り最適化しようとしています。私の読みでは、.offset.top の計算が非常に負担が大きいことを示しています。

私の質問は次のとおりです。私はそれを考えすぎていますか?この場合、デバウンスする必要がありますか? 私の解釈が正しければ、スクロール時に 3 つのオフセット計算が常に実行されます。誰でも最適化を提案したり、それが必要ない理由を別の方法で説明したりできますか?

ありがとうございました。

$(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'});
            }
          });

});