修复粘性导航栏，使其在向上滚动时出现在起始位置

Question

我正在尝试制作一个浮动导航栏，向上滚动时出现，向下滚动时消失。

我唯一的问题是栏不是从网站顶部开始，而是在标题下方。 使用这段代码，我设法让它出现/消失，但在一直向上滚动时它不会恢复到原来的位置。 它只是停留在浏览器窗口的顶部。

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
var didScroll;
var lastScrollTop = 0;
var delta = 5;
var navbarHeight = $('header').outerHeight();

$(window).scroll(function(event){
    didScroll = true;
});

setInterval(function() {
    if (didScroll) {
        hasScrolled();
        didScroll = false;
    }
}, 250);

function hasScrolled() {
    var st = $(this).scrollTop();

    // Scroll more than delta
    if(Math.abs(lastScrollTop - st) <= delta)
        return;

    // If scrolled down && past navbar, add class .nav-up
    if (st > lastScrollTop && st > navbarHeight){
        // Scroll Down
        $('sticknav').removeClass('nav-down').addClass('nav-up');
    } else {
        // Scroll Up
        if(st + $(window).height() < $(document).height()) {
            $('sticknav').removeClass('nav-up').addClass('nav-down');
        }
    }

    lastScrollTop = st;
}

我的导航栏 css 是这样的

sticknav {
margin-right: auto;
margin-left: auto;
left: 0px;
right: 0px;
transition: top 0.2s ease-in-out;
position: relative;
z-index: 9999;
}

.nav-up {
    top: -40px;
    position: fixed;
}

.nav-down {
    top: 0px;
    position: fixed;
}

而stickynav 是我的导航栏。

我知道这是因为我在一个位置循环它：固定； 状态，但我无法解决如何解决这个问题。

Answer 1

CSS Sticky是一个不错的选择。 唯一的缺点是不支持 IE11 。

 var didScroll; var lastScrollTop = 0; var delta = 5; var navbarHeight = $('header').outerHeight(); $(window).scroll(function(event) { didScroll = true; }); setInterval(function() { if (didScroll) { hasScrolled(); didScroll = false; } }, 250); function hasScrolled() { var st = $(this).scrollTop(); // Scroll more than delta if (Math.abs(lastScrollTop - st) <= delta) return; // If scrolled down && past navbar, add class .nav-up if (st > lastScrollTop && st > navbarHeight) { // Scroll Down $('.sticknav').removeClass('nav-down').addClass('nav-up'); } else { // Scroll Up if (st + $(window).height() < $(document).height()) { $('.sticknav').removeClass('nav-up').addClass('nav-down'); } } lastScrollTop = st; }

 .sticknav { z-index: 9999; position: -webkit-sticky; position: sticky; } .sticknav { height: 40px; background: red; } .nav-up { top: -40px; transition: top 0.2s ease-in-out; } .nav-down { top: 0px; transition: top 0.2s ease-in-out; }

 <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <div class="buffer"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor</p> </div> <header class="sticknav"></header> <div class="content"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore </p> </div>