Javascript：導航欄在滾動併到達頂部時消失

Question

我在我的網站上創建了一個導航欄（仍在開發中）。當訪問者向上滾動時，會出現此導航欄。但是，導航欄始終保持最佳狀態。在頂部我有原始菜單，所以需要有導航欄。

我想達到的目的是當訪問者點擊某個點時，菜單欄就會消失，就像點擊div並消失。到目前爲止沒有運氣。我使用-70px（position：fixed）將瀏覽欄放置在視口外，並在瀏覽器向上滾動時通過JavaScript顯示。

這是JavaScript的導航欄：

var lastScrollTop = pageYOffset || document.documentElement.scrollTop; 

window.addEventListener("scroll", function() { 
    var st = window.pageYOffset || document.documentElement.scrollTop; 
    if (st > lastScrollTop) { 
// Scroll Down 

$('.navbar').css({ 
    "transform": "translate3d(0,-70px,0)" 
}); 

} else { 
// Scroll Up 

$('.navbar').css({ 
    "transform": "translate3d(0,70px,0)" 
}); 
} 
    lastScrollTop = st; 
}, false); 

任何幫助，使擊球一定DIV向上滾動時，我將非常感激導航欄消失。提前致謝！

這是我得到的最接近，見下文。基本上它是我需要的（禁用某個區域的導航欄，在這種情況下是從底部開始的350px）。我只需要它是頂部，而不是底部。

$(window).scroll(function() { 
var pxFromBottom = 350; 
if ($(window).scrollTop() + $(window).height() > $(document).height() - pxFromBottom) { 
$('.navbar').css({ 
    "transform": "translate3d(0,-70px,0)" 
}); 
} 
}); 

Answer 1

更新：一些試驗和錯誤，我設法讓它工作。我添加了第二個條件，當滾動時隱藏菜單欄。我添加了這部分： if（（st> lastScrollTop）||（$（this）.scrollTop（）< 500））{ 這是導航欄隱藏時的條件，最佳。

var lastScrollTop = pageYOffset || document.documentElement.scrollTop; 

window.addEventListener("scroll", function() { 
    var st = window.pageYOffset || document.documentElement.scrollTop; 
    if ((st > lastScrollTop) || ($(this).scrollTop() < 500)) { 
    // Scroll Down 
    $('.navbar').css({ 
     "transform": "translate3d(0,-70px,0)" 
    }); 
    } else { 
    // Scroll Up 
    $('.navbar').css({ 
     "transform": "translate3d(0,70px,0)" 
    }); 
    } 
    lastScrollTop = st; 
    }, false); 

Answer 2

您可以使用Headroom.js來做到這一點。這是一個輕量級（2KB），高性能的JS小部件（無依賴！），允許您根據用戶的滾動更改類。

我建議隱藏你的標頭translateY(-100%)而不是使用像素值，所以即使你的標題高度改變，它仍然可以正常工作。

快速以下演示：

var header = document.querySelector('.header'); 
 
var headroom = new Headroom(header, { 
 
    "offset": 200, 
 
    "tolerance": 5, 
 
    "classes": { 
 
    "unpinned": "header--unpinned" 
 
    } 
 
}); 
 
headroom.init();

.header { 
 
    position:fixed; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    padding: 2rem; 
 
    color: white; 
 
    background: black; 
 
    transition: all .4s cubic-bezier(.770,0,.175,1); 
 
} 
 

 
.header--unpinned { 
 
    transform: translateY(-100%); 
 
} 
 

 
/* Demo purposes only */ 
 
body { height: 2000px; margin: 0; } 
 
p { padding: 2rem; } 
 
/* Demo purposes only */

<script src="https://unpkg.com/headroom.js"></script> 
 

 
<header class="header">Header</header> 
 

 
<!-- Demo purposes only --> 
 
<p>Scroll ↓</p><p>Scroll ↓</p><p>Scroll ↓</p><p>Scroll ↓</p> 
 
<!-- Demo purposes only -->

有很多你可以做更多，如改變上滾動的標題顏色（例如Poppulo's website），甚至使用不同的動畫（見Headroom.js playroom）。