粘性导航栏 jQuery 在 window 调整大小时出现抖动

Question

我第一次在粘性导航栏上工作，在尝试使其响应之前，一切都很好。调整 window 大小时，导航栏的 jQuery 会导致页面冻结，感觉有点不稳定。我是不是用调整大小检查过度了？

jQuery(document).ready(function() {

    //on page load will get nav offset and wrap nav in a placeholder 
    //for smooth transition to fixed position
    var navOffset = jQuery('.nav').offset().top;
    jQuery('.nav').wrap('<div class="nav-placeholder"></div>');
    jQuery('.nav-placeholder').height(jQuery('.nav').outerHeight());

    //when window is resized will get new offset so nav 
    //goes sticky at right time
    jQuery(window).resize(function() {
    navOffset = jQuery('.nav').offset().top;
    jQuery('.nav').wrap('<div class="nav-placeholder"></div>');
    jQuery('.nav-placeholder').height(jQuery('.nav').outerHeight());
    });



    //added some extra wraps for styling purposes mainly padding
    jQuery('.nav').wrapInner('<div class="nav-inner"</div>');
    jQuery('.nav-inner').wrapInner('<div class="nav-inner-most"</div>');

    //when scrolling past offset will set nav to fixed 'sticky'
    //when scrolling back up will unset the fixed sticky nav
    jQuery(window).scroll(function() {
        var scrollPos = jQuery(window).scrollTop();

        if(scrollPos >= navOffset) {
            jQuery('.nav').addClass('fixed');
        }
        else {
            jQuery('.nav').removeClass('fixed');
        }
    });

});

谢谢

Answer 1

您应该限制 resize、scroll 等事件的回调次数。

实现此目的的常见方法称为节流和去抖动。许多 javascript 库，例如 underscore、lodash 等都实现了这一点。

在jQuery的情况下，有一个jQuery插件jquery-throttle-debounce

你可以像这样使用它

jQuery(window).resize($.debounce( 250, function() {
  navOffset = jQuery('.nav').offset().top;
  jQuery('.nav').wrap('<div class="nav-placeholder"></div>');
  jQuery('.nav-placeholder').height(jQuery('.nav').outerHeight());
}));

粘性导航栏 jQuery 在 window 调整大小时出现抖动

Sticky nav bar with jQuery jerky on window resize

jquery

sticky

responsive-design