去抖动jquery滚动事件
关于去抖，我只是一个普遍的问题。 我在页面上的不同位置有三个菜单，当它们在滚动时从窗口顶部到达85px的位置时它们变得固定。 当它们到达顶部时，它们分层重叠。 我目前每个人都有一个function，我希望尽可能地优化。 我的阅读表明.offset.top计算非常费力。
我的问题是：我是否过度思考它，是否有必要在这种情况下去辩？ 如果我的解释是正确的，则在滚动时不断执行三个偏移计算。 任何人都可以建议优化或交替解释为什么它不是必要的。
谢谢。
$(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'}); } }); }); 对于这种情况，我认为这确实是一个偏好问题。 看看网站在您给定的情况下如何响应，并在您认为用户体验受到负面影响时进行调整。 我倾向于节流/去抖动滚动事件。
您可以采取一些措施来加速滚动处理程序（稍微）。 例如，如果你可以使用id，就像jQuery的优化选择器指南一样，例如$('#myElement')很快，因为它使用了document.getElementById 。
如果您担心性能会有更多小调整：如果不需要呼叫，请不要拨打任何电话来调整css。 即如果自上次触发滚动处理程序后没有任何更改。 （见isFixed布尔值）
$(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)); });
唯一重复的调用是$(window).scrollTop() ，如果你可以组合所有的滚动处理程序（3？），那么每个[throttled]滚动事件只需要调用一次。
如果不对HTML标记进行任何更改，您可以稍微优化代码：
$(function(){ // Check the initial Position of the fixed_nav_container var stickyHeaderTop0 = $('.fixed_heading_shop').offset().top; var stickyHeaderTop1 = $('.fixed_heading_pricetable').offset().top; var stickyHeaderTop2 = $('.fixed_heading_layout').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'}); } 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'}); } 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'}); } }); });
如果为if..elsefunction相同的三个元素提供一个公共类，那么它将更加优化。 我在JS中添加了一个’common’类，你可以在html中添加它。
$(function(){ // add common class to elements $('.fixed_heading_shop, .fixed_heading_pricetable, .fixed_heading_layout').addClass('common'); var elemArr = []; // Check the initial Position of the fixed_nav_container $('.common').each(function(index){ elemArr.push($(this).offset().top); }) $(window).scroll(function(){ $('.common').each(function(index){ if( $(window).scrollTop() > elemArr[index]) { $(this).css({position: 'fixed', top: '85px'}); $('.ghost_div'+index).css({display: 'block'}); } else { $(this).css({position: 'relative', top: '0px'}); $('.ghost_div'+index).css({display: 'none'}); } }); }); });
我会说，而不是试图直接设置CSS，利用类。
.fixed_heading_shop, .fixed_heading_pricetable { position:relative; top:0; } .ghost_div0, .ghost_div1 { display:block; } .scroll_trick .fixed_heading_shop, .scroll_trick .fixed_heading_pricetable { position:fixed; top:85px; } .scroll_trick .ghost_div0, .scroll_trick .ghost_div1 { display:none; }
$(function(){ var $window = $(window); var $body = $('body'); var top = $('.fixed_heading_shop').offset().top-85; $window.scroll(function(){ if( $window.scrollTop() > top) { $body.addClass('scroll_trick'); } else { $body.removeClass('scroll_trick'); } }); });