jQuery標頭滾動，如何偏移？

Question

我正在使用一種類似https://jsfiddle.net/mariusc23/s6mLJ/31/的標題滾動，因此當我向下滾動時，標題將縮回，而當我向上滾動時，它會重新顯示。

HTML：

<header class="nav-down">
    This is your menu.
</header>
<main>
    This is your body.
</main>
<footer>
    This is your footer.
</footer>

CSS：

body {
    padding-top: 40px;
}
header {
    background: #f5b335;
    height: 40px;
    position: fixed;
    top: 0;
    transition: top 0.2s ease-in-out;
    width: 100%;
}
.nav-up {
    top: -40px;
}
main {
   background:url( data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAPklEQVQYV2O8dOnSfwYg0NPTYwTRuAAj0QqxmYBNM1briFaIzRbi3UiRZ75uNgUHGbfvabgfsHqGaIXYPAMAD8wgC/DOrZ4AAAAASUVORK5CYII=
   ) repeat;
    height: 2000px;
}
footer { background: #ddd;}
* { color: transparent}

jQuery的：

// Hide Header on on scroll down
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;
}

除了問題，首頁頂部的圖片高約500像素，這幾乎就是我需要的。 我不希望頁眉在圖像上向上滾動，因此當它到達頁面頂部500px的位置時，我希望它縮回。

我已經玩過代碼了，但是我無法讓它完成我需要的工作，有什么想法嗎？

Answer 1

也許用st > 500交換st > navbarHeight ？

Answer 2

因此，當您向下滾動時，標題將永遠不可見。 向上滾動時，在圖像區域的頂部和底部之間看不到標題。

如果您根本不希望標題顯示前500像素，請刪除|| st < navbarHeight || st < navbarHeight 。

 if (st > 500 + navbarHeight || st < navbarHeight) {
   $('header').removeClass('nav-up').addClass('nav-down');
 } else {
   $('header').removeClass('nav-down').addClass('nav-up');
 }

演示版

 // Hide Header on on scroll down 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 > 500 + navbarHeight || st < navbarHeight) { $('header').removeClass('nav-up').addClass('nav-down'); } else { $('header').removeClass('nav-down').addClass('nav-up'); } } lastScrollTop = st; } 

 body { padding-top: 40px; margin: 0; } header { background: #f5b335; height: 40px; position: fixed; top: 0; transition: top 0.2s ease-in-out; width: 100%; } .nav-up { top: -40px; } main { background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAPklEQVQYV2O8dOnSfwYg0NPTYwTRuAAj0QqxmYBNM1briFaIzRbi3UiRZ75uNgUHGbfvabgfsHqGaIXYPAMAD8wgC/DOrZ4AAAAASUVORK5CYII= ) repeat; height: 2000px; } footer { background: #ddd; } * { color: transparent } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <header class="nav-down"> This is your menu. </header> <main> <img src="" width="100%" height="500px" style="background-color:#ccc;" /> This is your body. </main> <footer> This is your footer. </footer>