有兩種方法可以做到這一點，具體取決于您想要的行為。在這兩種情況下，我們都想獲取標題元素及其位置：
var headerDiv = document.querySelector("header");
var headerBottom = headerDiv.offsetTop + headerDiv.offsetHeight;
這意味著在滾動中，我們可以檢查我們是否已經傳遞了標題：
if (window.pageYOffset >= headerBottom)
1：標題正常滾動到視圖之外，向上滾動時固定在頂部
在此版本中，向下滾動時標題會滾出視圖，但當您開始向上滾動時，它會固定在屏幕頂部。
完整的工作示例：
var prevScrollpos = window.pageYOffset;
/* Get the header element and it's position */
var headerDiv = document.querySelector("header");
var headerBottom = headerDiv.offsetTop + headerDiv.offsetHeight;
window.onscroll = function() {
var currentScrollPos = window.pageYOffset;
/* if scrolling down, let it scroll out of view as normal */
if (prevScrollpos <= currentScrollPos ){
headerDiv.classList.remove("fixedToTop");
headerDiv.style.top ="-7.2rem";
}
/* otherwise if we're scrolling up, fix the nav to the top */
else{
headerDiv.classList.add("fixedToTop");
headerDiv.style.top = "0";
}
prevScrollpos = currentScrollPos;
}
body{ margin: 0;}
header {
background: blue;
height: 7.2rem;
transition: all 0.2s ease-in-out;
z-index: 100;
}
.content {
height:1000px;
}
header.fixedToTop {
position: fixed;
top: 0;
left: 0;
right: 0;
}
/* add space for fixed header when it's fixed to top */
header.fixedToTop + .content{
margin-top:8rem;
}
<header></header>
<div class="content" id="contentdiv">
<h1>My Page</h1>
<p>Content 1</p><p>Content 2</p><p>Content 3</p><p>Content 4</p><p>Content 5</p>
<p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p>
<p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p>
</div>
這是如何運作的
我們需要從標題中刪除固定定位并將其添加到fixedToTop我們將應用于滾動的類（例如）：
header {
height: 7.2rem;
transition: all 0.2s ease-in-out;
z-index: 100;
}
header.fixedToTop {
position: fixed;
top: 0; left: 0; right: 0;
}
現在滾動函數的邏輯非常簡單：
如果我們向下滾動，則讓標題滾動到視圖之外 - 刪除類fixedToTop。
如果我們向上滾動，添加我們的fixedToTop類，這將使它出現
請注意，我們需要顯式設置值才能top使過渡動畫起作用，因此我們也在代碼中這樣做。
將它們放在一起，我們得到以下滾動函數：
window.onscroll = function() {
var currentScrollPos = window.pageYOffset;
/* if scrolling down, let it scroll out of view as normal */
if (prevScrollpos <= currentScrollPos ){
headerDiv.classList.remove("fixedToTop");
headerDiv.style.top ="-7.2rem";
}
/* otherwise if we're scrolling up, fix the nav to the top */
else{
headerDiv.classList.add("fixedToTop");
headerDiv.style.top = "0";
}
prevScrollpos = currentScrollPos;
}
2：標題是固定的，直到我們滾動到它通常會消失的地方；向上滾動時固定在頂部
在這種情況下，標題是固定的，直到我們滾動通過它會消失的“自然”位置。
工作示例：
var prevScrollpos = window.pageYOffset;
/* Get the header element and it's position */
var headerDiv = document.querySelector("header");
var headerBottom = headerDiv.offsetTop + headerDiv.offsetHeight;
window.onscroll = function() {
var currentScrollPos = window.pageYOffset;
/* if we're scrolling up, or we haven't passed the header,
show the header at the top */
if (prevScrollpos > currentScrollPos || currentScrollPos < headerBottom){
headerDiv.style.top = "0";
}
else{
/* otherwise we're scrolling down & have passed the header so hide it */
headerDiv.style.top = "-7.2rem";
}
prevScrollpos = currentScrollPos;
}
header {
background: blue;
height: 7.2rem;
position: fixed;
top: 0;
left: 0;
right: 0;
transition: top 0.2s ease-in-out;
z-index: 100;
}
.content {
height:1000px;
margin-top:8rem; /* add space for fixed header */
}
<header></header>
<div class="content" id="contentdiv">
<h1>My Page</h1>
<p>Content 1</p><p>Content 2</p><p>Content 3</p><p>Content 4</p><p>Content 5</p>
<p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p>
<p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p>
</div>
這是如何運作的
滾動功能中的邏輯是這樣的：
如果我們向上滾動，則顯示標題：
如果我們向下滾動...
...如果我們滾動通過標題，將其隱藏
...否則顯示它
將它們放在一起，我們得到以下滾動函數：
var prevScrollpos = window.pageYOffset; // save the current position
window.onscroll = function() {
var currentScrollPos = window.pageYOffset;
/* if we're scrolling up, or we haven't passed the header, show the header */
if (prevScrollpos > currentScrollPos || currentScrollPos < headerBottom){
headerDiv.style.top = "0";
}
else{
/* otherwise we're scrolling down & have passed the header so hide it */
headerDiv.style.top = "-7.2rem";
}
prevScrollpos = currentScrollPos;
}
