jQuery頭部滾動，如何抵消？

我正在使用像這裏的標題滾動https://jsfiddle.net/mariusc23/s6mLJ/31/，所以當我向下滾動標題縮進時，當我向上滾動時，它回到視圖中。jQuery頭部滾動，如何抵消？

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的位置時，我希望它縮回。

我已經玩過代碼了，但是我無法讓它做我需要的，有什麼想法？

來源

2016-03-15 kevngibsn

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

如果您不想在頭部顯示首個500像素，請移除|| 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>

來源

2016-03-15 13:29:39 NiZa

謝謝NiZa，但這實際上與我所尋找的相反。這將保持向下滾動顯示頭部的第一個500px。我想要的是在頁面向上滾動之前，頁眉根本不顯示，然後在頁面頂部達到500px（而不是從頂部減小500px）時再次隱藏。所以基本上有一個500px的「安靜區域」，頁面頂部沒有標題。那有意義嗎？ – kevngibsn

好吧，我明白了。當滾動位於頂部時，您甚至不想顯示標題？所以第一個500px沒有標題。 – NiZa

檢查更新的答案，請讓我知道。 – NiZa

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

來源

2016-03-15 13:22:45

謝謝你比約恩，這樣做的工作，但它是爲我的回答NIZA的迴應 - 這持續了第一500px的到位頭。 – kevngibsn

jQuery頭部滾動，如何抵消？

回答

相關問題