Question

我设置了一个简单的网站，其中包含标题，导航栏和内容。当页面到达导航栏时，位置变得固定，因此导航栏位于页面顶部 - 此时，导航栏高度也会变小（因为我喜欢这种效果） - 我通过添加单独的类来完成此操作，固定和更薄的导航栏。

大多数人都知道当你添加＆＃34; position：fixed＆＃34;时出现的问题。一个内联元素，它使内容突然＆＃34;跳跃＆＃34;向上。为了抵消这一点，我添加了一个名为＆＃34; stop_the_jump＆＃34;这是隐藏的，直到导航栏固定，此时它会显示在它的位置。所有这一切都在顺利进行的过程中顺利运行，但是当你向后滚动时，由于导航栏现在更薄，你会得到一个跳跃。

我把头发拉过这个头发，怎样才能消除在回来的路上发生的跳跃。

这是一个清楚显示我的问题的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

创建跳跃是因为您正在修改导航栏的高度并且当它不固定时（60px对80px）。这会导致导航栏底部与静态内容顶部之间的空间不匹配。您可以使用以下代码使这种转换看起来更好（但是如果您考虑不更改导航栏的高度，或者可能创建较小的增量，您可以根据滚动位置增加/减小导航栏的大小，会在这里进行从固定到非固定无缝转换的演示：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类引用（您可以将它们组合起来

.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”类，使得菜单更薄。

现在无缝地工作。感谢上面的答案指出我正确的方向 - 这是我的最终代码：

$(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/

粘性导航栏可以让内容重新启动

2 个答案: