用于粘性导航的浏览器调整大小事件

Question

从现在开始我一直在处理这个问题，我希望这里有人可以帮助我。 我正在尝试制作一个粘性导航和一个 100% 高度的标题（body 和 html 也设置为 100% 高度）。基本上我遇到的问题是粘性导航仅在页面（重新）加载后才能正常工作。但是，在调整浏览器窗口大小后滚动会使导航跳到早期或延迟到最顶部的固定位置。 我想我需要实现一个调整大小事件，以便每次调整窗口大小时都会触发变量“navOffset”的计算，对吗？ 我尝试了许多将其插入我的代码的方法，这些方法也在下面的链接中进行了说明，但我每次都失败了。 我希望有人可以向我透露这个秘密，因为我对此感到很疯狂。

非常感谢，祝您度过愉快的一周！

萨沙

我想要达到的效果示例： http://html5-webdesign.berlin/

教程，对我没有帮助： https://stackoverflow.com/…/jquery-combine-document-ready-an…

jQuery(document).ready(function() {

var navOffset = jQuery("nav").offset().top;

jQuery("nav").wrap('<div class="nav-placeholder"></div>');
jQuery(".nav-placeholder").height(jQuery("nav").outerHeight());

jQuery(window).scroll(function() {
var scrollPos = jQuery(window).scrollTop();

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

Answer 1

只需复制您的第二个函数（您可能应该命名）并将其添加到窗口调整大小事件中：

jQuery(document).ready(function() {

var navOffset = jQuery("nav").offset().top;

jQuery("nav").wrap('<div class="nav-placeholder"></div>');
jQuery(".nav-placeholder").height(jQuery("nav").outerHeight());

function setPosition() {
var scrollPos = jQuery(window).scrollTop();

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

jQuery(window).scroll(setPosition);

jQuery(window).resize(setPosition);
});