Question

我第一次使用粘性导航栏，我把所有东西都做得很好，直到尝试使其响应。当窗口调整大小时，导航栏的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库，如下划线，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生涩的窗口调整大小

1 个答案: