粘性导航栏使内容在备份时跳转 [英] Sticky navbar makes content jump on way back up

问题描述

我有一个简单的网站，其中设置了标题，导航栏和内容.当页面到达导航栏时，位置固定，因此导航栏位于页面顶部-此时，导航栏的高度也变小了(如我喜欢的效果)-我通过添加单独的类来做到这一点，固定到导航栏并变薄.

I Have a simple site set up with a header, navbar and content. When the page reaches the navbar, the position becomes fixed so the navbar sits at the top of the page - at this point, the navbar height also gets a bit smaller (as I like this effect) - I have done this by adding separate classes, fixed and thinner to the navbar.

大多数人都知道向内联元素添加"position:fixed"时会发生的问题，因为它会使内容突然跳"起来.为了解决这个问题，我添加了一个名为"stop_the_jump"的div，该div一直隐藏到导航栏变得固定为止，此时导航栏将显示在该位置.所有这些操作在向下的过程中都能顺利运行，但是由于导航栏现在更薄，因此在向上滚动时会跳转.

Most people are aware of the issue that occurs when you add "position:fixed" to an inline element in that it makes the content suddenly "jump" upwards. To counteract this i have added a div called "stop_the_jump" which is hidden until the navbar becomes fixed, at which point it is displayed in it's place. All of this runs smoothly on the way down, but as you scroll back up you get a jump due to the fact that the navbar is now thinner.

我正在拔头发，如何消除在备份过程中发生的这种跳跃.

I'm pulling my hair out over this one, how can I eliminate this jump that occurs on the way back up.

这是一个JSFiddle，清楚地显示了我的问题: http://jsfiddle.net/gnac14qa/

Here is a JSFiddle clearly showing my issue: http://jsfiddle.net/gnac14qa/

我的jQuery代码如下:

My jQuery code is as follows:

$(window).scroll(function() {    

var Scroll = $(window).scrollTop();
var ScrollFXfullHeight = $('.header-wrapper').height();

if (Scroll == ScrollFXfullHeight) {

$("#navigation").addClass("fixed");
$(".stop_the_jump").css('display','block');

} else if (Scroll > ScrollFXfullHeight) {
if(!$("#navigation").hasClass('fixed')) {
    $(".stop_the_jump").css('display','block');
    $("#navigation").addClass("fixed");
}
$("#navigation").addClass("thinner"); 
} else {
$("#navigation").removeClass("thinner fixed");
$(".stop_the_jump").removeClass("thinner");
$(".stop_the_jump").css('display','none');
}
});

任何帮助将不胜感激.

推荐答案

好，所以我根据上述答案提出了一个解决方案.本质上，此问题是由以下事实引起的:a)导航栏会同时调整大小并变得固定，并且b)导航栏会随着过渡而调整大小-因此它不是立即改变大小

Ok so I came up with a solution based on the answers above. Essentially the issue is caused by the fact that a) the navbar resizes aswell as becomes fixed and b) The navbar resizes with a transition - so it's not an immediate change in size

我解决这个问题的方法是分阶段对position属性和大小进行更改.首先，在显示"stop_the_jump" div的同时位置更改为固定，然后一旦页面清除了"stop_the_jump"的高度(与菜单大小相同)，然后添加"thinner"类，使菜单变薄.

The way I got around this is to stage the change in the position attribute and the size change. First the position changes to fixed at the same time as the "stop_the_jump" div is displayed, then once the page clears the height of "stop_the_jump" (which is the same size as the menu) then the "thinner" class is added making the menu thinner.

现在可以无缝运行了.感谢以上给出的正确答案，这是我的最终代码:

This now works seamlessly. Thanks to the above answers for pointing me in the right direction - here is my final code:

$(window).scroll(function() {    

var Scroll = $(window).scrollTop();
var ScrollFXfullHeight = $('.header-wrapper').height();

if (Scroll == ScrollFXfullHeight) {
$("#navigation").addClass("fixed");
$(".stop_the_jump").css('display','block');

} else if (Scroll > ScrollFXfullHeight) {
if(!$("#navigation").hasClass('fixed')) {
    $(".stop_the_jump").css('display','block');
    $("#navigation").addClass("fixed");
}
if (Scroll > ScrollFXfullHeight+80) {
$("#navigation").addClass("thinner"); 
}
else {
$("#navigation").removeClass("thinner");
}
} else {
$("#navigation").removeClass("thinner fixed");
$(".stop_the_jump").removeClass("thinner");
$(".stop_the_jump").css('display','none');
}

});

以及指向更新的JSfiddle的链接: http://jsfiddle.net/gnac14qa/6/

and a link to the updated JSfiddle: http://jsfiddle.net/gnac14qa/6/

这篇关于粘性导航栏使内容在备份时跳转的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！