固定滚动后顶部导航

Question

我有一个问题，就是在我滚动网站后导航菜单的固定位置不好。 我想向下滚动网站，以便我的导航菜单保持在相同位置。 滚动后，我需要此菜单保持在顶部。

第一次滚动后，我需要此菜单才能跳到顶部，并且可以在下一个向下滚动时使用，但仍固定在顶部。 而且，如果我滚动回到网站的基本位置，则需要菜单返回到其开始位置（如现在的徽标下方）。

我的实际CSS设置：

z-index: 9999;
position: fixed;

Javascript设置：

$("document").ready(function($){
    var nav = $('#menu');

    $(window).scroll(function () {
        if ($(this).scrollTop() > 125) {
            nav.addClass("f-nav");
        } else {
            nav.removeClass("f-nav");
        }
    });
});

但这是行不通的。 始终，如果我向下滚动，导航菜单不会跳到顶部。

您可以看到我的问题： 在这里

Answer 1

将您的初始样式设置为

#menu { text-align: center; height: 65px; width: 100%; z-index: 9999; position: relative; background-color: #0F1113; border-bottom-width: 4px; border-bottom-style: solid; border-bottom-color: #63842d; }

然后将此样式提供给滚动类

.f-nav { position:fixed !important; top:0; -webkit-transition: height 0.3s // these transitions for give smooth scroll; -moz-transition: height 0.3s // these transitions for give smooth scroll; transition: height 0.3s // these transitions for give smooth scroll; }

Answer 2

演示

jQuery的

var lastScroll = 0;
var scrollToStick = $("header").height();

$(window).on('scroll', function (evt) {
    var newScroll = $(window).scrollTop();
    $('header').toggleClass('fxdHdr', newScroll > lastScroll && newScroll > scrollToStick);
    lastScroll = newScroll;
});

CSS

body {
    margin: 0;
    padding: 0;
}
.fxdHdr {
    -webkit-transform: translateY(-60px);
    -moz-transform: translateY(-60px);
    -ms-transform: translateY(-60px);
    -o-transform: translateY(-60px);
    transform: translateY(-60px);
    box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.14), 0px 2px 4px rgba(0, 0, 0, 0.28);
}
header {
    height: 60px;
    background: #d3145a;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    -webkit-transition: -webkit-transform 500ms ease;
    -moz-transition: -moz-transform 500ms ease;
    -ms-transition: -ms-transform 500ms ease;
    -o-transition: -o-transformtransform 500ms ease;
    transition: transform 500ms ease;
    text-align:center;
    line-height:60px;
}