CSS 滚动期间粘性导航元素跳转
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28864210/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Sticky navigation element jumps during scroll
提问by Aaron M
In Firefox especially, I've run into an issue I can't figure out how to fix.
特别是在 Firefox 中，我遇到了一个无法解决的问题。
On the following page, when scrolling down the page jumps several times - mainly on smaller screens where the page doesn't have its full size displayed. You can replicate this issue by making your browser smaller than the page so you have to scroll.
在接下来的页面上，向下滚动时页面会跳转几次 - 主要是在页面未显示完整尺寸的较小屏幕上。您可以通过使浏览器小于页面来重现此问题，因此您必须滚动。
It's on this page: http://www.nucanoe.com/frontier-accessories/
它在这个页面上：http: //www.nucanoe.com/frontier-accessories/
If I disable the position:fixedon the navigation selector, it fixes the issue - but we need the navigation to be sticky. Is there a solution to fix this? I'm thinking we may need to use jQuery somehow.
如果我禁用position:fixed导航选择器上的 ，它可以解决问题 - 但我们需要导航保持粘性。有没有办法解决这个问题？我想我们可能需要以某种方式使用 jQuery。
Thanks in advance!
提前致谢！
回答by TheCarver
After seeing you asking for help on another answer, I will try and explain more clearly for you.
在看到您在另一个答案上寻求帮助后，我会尝试为您解释得更清楚。
The Problem
问题
Your problem is when you add position:fixedto the navigation bar, it removes it from its place and sticks it at the top of the page. This is why the rest of your content jumps up - because the navigation bar is not where it was anymore.
您的问题是当您添加position:fixed到导航栏时，它会将其从其位置移除并将其粘贴在页面顶部。这就是您的其余内容跳起来的原因 - 因为导航栏不再是原来的位置。
How To Fix
怎么修
You can get around this by wrapping your navigation element in a new div- let's call it nav-wrapper - and set its height to the same as your navigation element. These are known as placeholder elements. This new wrapper and your original navigation bar must always be the same height for the 'jump' to disappear.
您可以通过将您的导航元素包装在一个新元素中来解决这个问题div——我们称之为导航包装器——并将其高度设置为与您的导航元素相同。这些被称为占位符元素。这个新的包装器和你原来的导航栏必须始终处于相同的高度，“跳转”才会消失。
<div class="nav-wrapper" style="height:80px;"> <-- add this
<div class="your-original-nav" style="height:80px"></div>
</div> <!-- add this
Now, when you set the navigation bar to fixedand it disappears to the top, the new wrapper we created with the same height keeps the page's content the same. When the fixed class has been removed, it sits back in the wrapper again, without pushing the content down.
现在，当您将导航栏设置为fixed并且它消失到顶部时，我们创建的具有相同高度的新包装器使页面的内容保持不变。当固定的类被移除时，它会再次回到包装器中，而不会将内容向下推。
A Suggestion
一条建议
From what I can see on your site, there will be a big gap where the navigation bar was until the new fixed navigation reaches that point and covers it. What you want, is a little jQuery to figure out where to make the navigation fixed and where to hide it. I'll explain:
从我在您的网站上看到的情况来看，在新的固定导航到达该点并覆盖它之前，导航栏所在的位置会有很大的差距。你想要的是一个小的 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');
}
});
You may want to add further functionality to this example, as it is very, very basic. You would probably want to recalculate the offsets on window resize as one addition.
您可能希望向此示例添加更多功能，因为它非常非常基础。您可能希望将窗口调整大小的偏移量重新计算为一次添加。
A Demo
演示
This is a little demo which might help you- I was bored and feeling helpful :)
这是一个可能对你有帮助的小演示——我很无聊，感觉很有帮助:)
回答by Henning Fischer
Made it this way now: Added an element before the nav:
现在这样做：在导航之前添加了一个元素：
<div class="nav-placeholder"></div>
And the jquery:
和jQuery：
<script type="text/javascript">
$(document).on("scroll",function(){
if($(document).scrollTop()>150){
$(".nav-placeholder").height($(".nav").outerHeight());
} else {
$(".nav-placeholder").height(0);
}
});
</script>
When I scroll down to 150 the placeholder gets the height of the nav, when i scroll up again I set it's height to 0.
当我向下滚动到 150 时，占位符获得导航的高度，当我再次向上滚动时，我将其高度设置为 0。
Here is a fiddle: https://jsfiddle.net/herrfischerhamburg/562wu62y/
回答by SwegreDesigns
You need to have a placeholder when your nav goes from relative to fixed. Therefore you need to make a new div.
当您的导航从相对变为固定时，您需要有一个占位符。因此，您需要创建一个新的 div。
jQuery(".nav").wrap('<div class="nav-placeholder"></div>');
jQuery(".nav-placeholder").height(jQuery(".nav").outerHeight());
jQuery(".nav").wrapInner('<div class="nav-inner"></div>');
Remember to change ".nav", "nav-inner" and "nav-placeholder" to your desire.
请记住根据您的需要更改“.nav”、“nav-inner”和“nav-placeholder”。
For a fully functional sticky nav, check my website: http://www.swegre.se/
如需功能齐全的粘性导航，请查看我的网站：http: //www.swegre.se/
回答by Aleksy Rusza?a
I solved the problem differently so on firefox as you can see in logs it scroll up itself so to stop this scrolling I made simple statement
我以不同的方式解决了这个问题，所以在 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');
}
});
});
that solution work for me when I can't specify height of div's I use.
当我无法指定我使用的 div 的高度时，该解决方案对我有用。
