尤其是在 Firefox 中，我遇到了一个我不知道如何解决的问题。
在下一页上，当向下滚动页面时会跳转几次 - 主要是在较小的屏幕上，页面没有完整显示。您可以通过使浏览器小于页面来复制此问题，因此您必须滚动。
在这个页面上：http://www.nucanoe.com/frontier-accessories/
如果我禁用导航选择器上的position:fixed，它可以解决问题 - 但我们需要导航具有粘性。有解决这个问题的方法吗？我在想我们可能需要以某种方式使用 jQuery。
提前致谢！
【问题讨论】：
我在 Firefox 上以不同的方式解决了这个问题，正如您在日志中看到的那样，它会自行向上滚动，所以为了停止这种滚动，我做了简单的声明
$(document).ready(function () {
var header = $('#left-menu');
var offset = header.offset().top;
var up = true;
$(window).scroll(function () {
var scroll = $(window).scrollTop();
console.log(scroll + ' ' + offset )
if (scroll >= offset) {
header.addClass('sidebar-sticky');
if (up){
$(window).scrollTop(offset);
up=false;
}
} else {
up=true;
header.removeClass('sidebar-sticky');
}
});
});
当我无法指定我使用的 div 的高度时，该解决方案对我有用。
【讨论】：
现在就这样做了：在导航之前添加了一个元素：
<div class="nav-placeholder"></div>
还有 jquery：
<script type="text/javascript">
$(document).on("scroll",function(){
if($(document).scrollTop()>150){
$(".nav-placeholder").height($(".nav").outerHeight());
} else {
$(".nav-placeholder").height(0);
}
});
</script>
当我向下滚动到 150 时，占位符获取导航的高度，当我再次向上滚动时，我将其高度设置为 0。
【讨论】：
看到你在另一个答案上寻求帮助后，我会尽力为你解释得更清楚。
问题
您的问题是，当您将position:fixed 添加到导航栏时，它会将其从其位置移除并粘贴在页面顶部。这就是为什么您的其余内容会跳起来的原因 - 因为导航栏不再是原来的位置了。
如何修复
您可以通过将您的导航元素包装在一个新的div 中来解决这个问题 - 我们称之为 nav-wrapper - 并将其高度设置为与您的导航元素相同。这些被称为占位符元素。这个新包装器和您原来的导航栏必须始终保持相同的高度，“跳转”才会消失。
<div class="nav-wrapper" style="height:80px;"> <-- add this
<div class="your-original-nav" style="height:80px"></div>
</div> <!-- add this
现在，当您将导航栏设置为fixed 并且它消失到顶部时，我们创建的具有相同高度的新包装器使页面的内容保持不变。移除固定类后，它会再次回到包装器中，而不会将内容向下推。
建议
根据我在您的网站上看到的情况，导航栏所在的位置会有很大的差距，直到新的固定导航到达该点并覆盖它。你想要的是一个小 jQuery 来确定在哪里固定导航以及在哪里隐藏它。我来解释一下：
// cache the element
var $navBar = $('.your-original-nav');
// find original navigation bar position
var navPos = $navBar.offset().top;
// on scroll
$(window).scroll(function() {
// get scroll position from top of the page
var scrollPos = $(this).scrollTop();
// check if scroll position is >= the nav position
if (scrollPos >= navPos) {
$navBar.addClass('fixed');
} else {
$navBar.removeClass('fixed');
}
});
您可能希望在此示例中添加更多功能，因为它非常、非常基础。您可能希望重新计算窗口调整大小的偏移量。
演示
This is a little demo which might help you - 我很无聊，感觉很有帮助:)
【讨论】：
当您的导航从相对变为固定时，您需要有一个占位符。 因此，您需要创建一个新的 div。
jQuery(".nav").wrap('<div class="nav-placeholder"></div>');
jQuery(".nav-placeholder").height(jQuery(".nav").outerHeight());
jQuery(".nav").wrapInner('<div class="nav-inner"></div>');
记得将“.nav”、“nav-inner”和“nav-placeholder”更改为您想要的。
有关功能齐全的粘性导航，请查看我的网站：http://www.swegre.se/
【讨论】：