标题隐藏在滚动定位上

Question

我已经包含了一个片段，以显示我现在拥有的一般概念。该片段将显示一个标题，如果您滚动标题保持相同的大小，直到标题的完整高度向下滚动然后它将消失。然后当你向上滚动（当标题消失时）标题将显示。

我似乎无法弄清楚的问题是如何从我的CSS中删除position: fixed并仍然使javascript工作。我希望标题正常向下滚动（就像Stack overflow＆＃39; s标题一样），但是在向上滚动时仍能重新显示。

我尝试取出position: fixed并且脚本坏了。我还尝试将position: fixed添加到nav-up课程中......两项都没有改变。

有谁知道我能做些什么让这项工作？

＆＃13;

＆＃13;

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;
}

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

更新

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

的新jsfiddle

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>