javascript - 标题隐藏在滚动定位

Question

我已经包含了一个片段来展示我现在所拥有的内容的总体思路。该代码段将显示标题，如果您滚动标题，则标题保持相同大小，直到标题的整个高度向下滚动，然后它会消失。然后当你向上滚动时(当标题消失时)标题将显示。

我似乎无法弄清楚的问题是如何从我的 css 中删除 position: fixed 并且仍然让 javascript 工作。我希望 header 正常向下滚动(就像 Stack overflow 的 header 一样)，但是在向上滚动时仍然能够重新出现。

我尝试取出 position: fixed 但脚本坏了。我还尝试将 position: fixed 添加到 nav-up 类中……但都没有改变。

有谁知道我可以做些什么来完成这项工作？

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();
    
    // Make sure they scroll more than delta
    if(Math.abs(lastScrollTop - st) <= delta)
        return;
    
    // If they scrolled down and are past the navbar, add class .nav-up.
    // This is necessary so you never see what is "behind" the navbar.
    if (st > lastScrollTop && st > navbarHeight){
        // Scroll Down
        $('header').removeClass('nav-down').addClass('nav-up');
    } else {
        // Scroll Up
        if(st + $(window).height() < $(document).height()) {
            $('header').removeClass('nav-up').addClass('nav-down');
        }
    }
    
    lastScrollTop = st;
}

html, body {
	padding:0;
	margin:0;
}
header {
    /*background: #2F4F4F;*/
	/*background: #53868B;*/
	/*background: #35586C;*/
	background: #F2F2F2;
    height: 120px;
    position: fixed;
    top: 0;
    transition: top 0.2s ease-in-out;
    width: 100%;
	z-index: 100;
}

.nav-up {
    top: -120px;
}
#logo {
	padding: 5px 20%;
	display: inline-block;
}
#logo img {
	height: 110px;
	width: auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<header class="nav-down">
	<div id="logo">
		<img src="images/eslich.png" alt="">
	</div>
</header>
<br><br><Br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><Br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><Br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><Br><br><br><br><br><br><br><br><br><br><br><br><br>

Answer 1

更新

这是使用她的代码的新 jsfiddle https://jsfiddle.net/jz8aa5yz/2/

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();

    // Make sure they scroll more than delta
    if(Math.abs(lastScrollTop - st) <= delta)
        return;

    // If they scrolled down and are past the navbar, add class .nav-up.
    // This is necessary so you never see what is "behind" the navbar.
    if (st > lastScrollTop && st > navbarHeight){
        // Scroll Down
        $('header').removeClass('nav-down').addClass('nav-up');
    } else {
            if (st < navbarHeight) {
            if (st === 0 || st < 50) {
            $('header').css('position', 'static');
          }
        } else {
            $('header').css('position', 'fixed');
        }
        // Scroll Up
        if(st + $(window).height() < $(document).height()) {
            $('header').removeClass('nav-up').addClass('nav-down');
        }
    }

    lastScrollTop = st;
}

`

旧

我还在测试一些javascript，但我想知道你想要的效果是不是这样的？我做了一些不同的事情，但主要是使用 hide()、css()、slideUp()、slideDown () 和 if/else 语句。这是一个 jsfiddle of the example

<script>
        $(document).ready(function () {
            var header = $("header");
            var lastScrollTop = 0;

            $(window).on("scroll", function () {
                currentScrollTop = $(this).scrollTop();

                if ($("body").scrollTop() > header.outerHeight()) {
                    if (currentScrollTop > lastScrollTop) {
                        if (header.css("position") == "fixed") {
                            header.slideUp();
                        } else {
                            header.css({
                                display: "none",
                                position: "fixed"
                            });
                        }
                    } else {
                        header.slideDown();
                    }
                } else {
                    if (currentScrollTop === 0) {
                        header.css({
                            display: "block",
                            position: "static"
                        });
                    }
                }

                lastScrollTop = currentScrollTop;
            });
        });
    </script>