窗口调整时带有jQuery jecky的粘性导航栏

我第一次在一个粘粘的导航条上工作，我让所有的东西都很好地工作，直到我试着让它响应。当窗口调整大小时，导航栏的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');
        }
    });

});

jQuery（文档）.ready（函数（）{
//“页面加载”将获取导航偏移量，并将导航换行到占位符中
//用于平稳过渡到固定位置
var navOffset=jQuery（'.nav'）.offset（）.top；
jQuery（'.nav'）.wrap（''）；
jQuery（'.nav占位符'）.height（jQuery（'.nav'）.outerHeight（））；
//当窗口调整大小时，将获得新的偏移，以便导航
//在适当的时候变粘
jQuery（窗口）.resize（函数（）{
navOffset=jQuery（'.nav'）.offset（）.top；
jQuery（'.nav'）.wrap（''）；
jQuery（'.nav占位符'）.height（jQuery（'.nav'）.outerHeight（））；
});
//添加了一些额外的包装，主要用于填充样式
jQuery（'.nav'）.wrapInner（'您应该限制事件的回调次数，例如
调整大小
，
滚动
触发

实现这一点的常用方法称为节流和去盎司。许多javascript库（如下划线、lodash等）都实现了这一点

对于jQuery，有一个jQuery插件

你可以像这样使用它

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（窗口）.resize（$.debounce（250，函数）（）{
navOffset=jQuery（'.nav'）.offset（）.top；
jQuery（'.nav'）.wrap（''）；
jQuery（'.nav占位符'）.height（jQuery（'.nav'）.outerHeight（））；
}));
您的导航高度在不同的屏幕分辨率下会有所不同吗？这就是为什么您要用javascript将其包装在占位符中？很抱歉，之前没有看到此评论。是的，因为我的英雄图像宽度设置为“覆盖”，所以高度会有所不同。谢谢您，这是一个很好的解决方案。我有一种感觉，我在回调时做得太多了。