Question

我几天以来一直在处理这个问题，我希望有人可以帮助我。我尝试制作粘性导航和100％高度标题（正文和html也设置为100％高度）。基本上我遇到的问题是粘性导航仅在（重新）加载页面后才能正常工作。但是，在调整浏览器窗口大小后滚动会使导航跳转到较早或延迟到最顶端的固定位置。我猜我需要实现一个resize事件，以便计算变量＆＃34; navOffset＆＃34;每次窗口调整大小时都会触发，对吧？我尝试了很多方法将其插入到我的代码中，这些方法也在下面的链接中进行了解释，但我每次都会愚蠢。我希望有人可以向我透露这个秘密，因为我对此感到疯狂。

非常感谢，祝你有个愉快的一周！

的Sascha

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

教程，对我没有帮助： https://stackoverflow.com/ ... / jQuery的结合文档准备安...

＆＃13;

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");
}
});
});

＆＃13;

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);
});

浏览器调整粘贴导航的事件

1 个答案: