粘性导航栏使内容在返回的路上跳转

Question

我有一个简单的网站设置 header、导航栏和内容。当页面到达导航栏时，位置固定，因此导航栏位于页面顶部 - 此时，导航栏高度也变小了一点（因为我喜欢这种效果） - 我通过添加单独的类，导航栏固定且更细。

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

我正在为这个而烦恼，我怎样才能消除在返回过程中发生的这种跳跃。

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

我的jQuery代码如下：

$(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');
}
});

如有任何帮助，我们将不胜感激。

Answer 1

产生跳跃是因为您在固定和不固定时更改导航栏的高度（60 像素对 80 像素）。这会导致导航栏底部和静态内容顶部之间的 space 不匹配。您可以使用以下代码使此转换看起来更好一些（但是如果您考虑不更改导航栏的高度，或者可能创建较小的增量，其中您 increase/decrease 导航栏的大小取决于滚动位置，这将使从固定到非固定的无缝过渡）演示在这里：http://jsfiddle.net/gnac14qa/3/

if (Scroll-18 == ScrollFXfullHeight) { // 18 looks better, the offset is actual 20px but 20 looks choppy

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

} else if (Scroll-22 > ScrollFXfullHeight) { // 22 looks better for the same reason above
    if(!$("#navigation").hasClass('fixed')) {
        $(".stop_the_jump").css('display','block');
        $("#navigation").addClass("fixed");
    }
    $("#navigation").addClass("thinner"); 
}

此外，您有两个相同的 css class 引用（您可以将它们组合起来

.stop_the_jump {
    width:100%;
    float:none;
    display:none;
    background:green;
}
.stop_the_jump {
    height:80px; // can be moved to the class above
}

我的意思是不切换导航栏的高度：http://jsfiddle.net/gnac14qa/4/

#navigation.thinner {
    width:100%;
    height:80px !important;  //kept at 80px instead of changing to 60px
}

Answer 2

好的，所以我根据上面的答案想出了一个解决方案。从本质上讲，这个问题是由以下事实引起的：a) 导航栏调整大小并变得固定，b) 导航栏调整大小并进行过渡 - 所以它不会立即改变大小

我解决这个问题的方法是暂存位置属性的变化和大小的变化。首先位置在显示 "stop_the_jump" div 的同时变为固定，然后一旦页面清除 "stop_the_jump" 的高度（与菜单大小相同）然后"thinner" 添加 class 使菜单更薄。

现在可以无缝运行了。感谢以上答案为我指明了正确的方向——这是我的最终代码：

$(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 的 link： http://jsfiddle.net/gnac14qa/6/

粘性导航栏使内容在返回的路上跳转

Sticky navbar makes content jump on way back up

jquery

scroll

addclass

removeclass

scrolltop