增量縮小動畫導航欄

Question

我創建了一個固定的，動畫的導航欄，縮小滾動條。目前，如果ypos> 10，它會從150縮減到100。但是，我想爲縮小添加第二個階段。所以如果ypos> 10但是< 40，它執行狀態1，如果它大於40，它執行狀態2，這將從100縮小到50.

問題：我可以得到第一階段的工作，但是我不知道如何觀察縮小的第二個狀態，或者如何添加改變第一個的第二個類。

function shrink() 
 
{ 
 
\t ypos = window.pageYOffset; 
 
\t var topBar = document.getElementById("Top-Bar"); 
 
\t 
 
\t if(ypos > 10 && ypos < 39) 
 
\t { 
 
\t \t topBar.classList.add("shrink"); 
 
\t } 
 
\t else if(ypos > 40) 
 
\t { 
 
\t \t topBar.classList.add("secondShrink"); 
 
\t } 
 
\t else 
 
\t { 
 
\t \t topBar.classList.remove("shrink"); 
 
\t \t topBar.classList.add("secondShrink"); 
 
\t } 
 
}; 
 

 
window.addEventListener("scroll", shrink)

#Top-Bar 
 
{ 
 
\t height: 150px; 
 
\t width: 100%; 
 
\t background-color: #ccc; 
 
\t display: flex; 
 
\t justify-content: center; 
 
\t align-items: center; 
 
\t transition: all .2s ease; 
 
\t position: fixed; 
 
\t z-index: 2; 
 
} 
 

 
#Top-Bar.shrink 
 
{ 
 
\t height: 100px; 
 
\t transition: all .2s ease; 
 
} 
 

 
#Top-Bar.shrink.secondShrink 
 
{ 
 
\t height: 50px; 
 
} 
 

 
.content 
 
{ 
 
\t content: ""; 
 
\t height: 1200px; 
 
\t position: relative; 
 
\t z-index: 1; 
 
}

<div id="Top-Bar"> 
 
<h1>Site Title</h1> 
 
</div> 
 

 
<div class="content"></div>

我試圖重新從以下頁面的效果：http://www.newmediacampaigns.com/blog/responsive-site-header

Answer 1

正如我在評論中提到：

論的第一個滾動頁面在yPos 0，你添加secondShrink到頂部欄。在任何時候你都不會刪除它，所以從這裏開始，頂部的酒吧總是會有。secondShrink。正因爲如此，正常收縮將永遠不會被擊中。

我在下面修改了您的代碼，以便一次只收縮一個連接到頂部欄。此外，您的if和if else不包含1-10或39-40中的任何內容。方便地，一個鼠標滾輪點擊，或一個向下箭頭點擊是正好40個像素。

看看這個清理版本：

function shrink() 
 
{ 
 
\t ypos = window.pageYOffset; 
 
\t var topBar = document.getElementById("Top-Bar"); 
 
\t 
 
\t if(ypos > 0 && ypos <= 40) 
 
\t { 
 
       topBar.classList.remove("secondShrink"); 
 
\t \t topBar.classList.add("shrink"); 
 
\t } 
 
\t else if(ypos > 40) 
 
\t { 
 
\t \t topBar.classList.add("secondShrink"); 
 
\t } 
 
\t else //ypos is 0 
 
\t { 
 
\t \t topBar.classList.remove("shrink"); 
 
\t \t topBar.classList.remove("secondShrink"); 
 
\t } 
 
}; 
 

 
window.addEventListener("scroll", shrink)

#Top-Bar 
 
{ 
 
\t height: 150px; 
 
\t width: 100%; 
 
\t background-color: #ccc; 
 
\t display: flex; 
 
\t justify-content: center; 
 
\t align-items: center; 
 
\t transition: all .2s ease; 
 
\t position: fixed; 
 
\t z-index: 2; 
 
} 
 

 
#Top-Bar.shrink 
 
{ 
 
\t height: 100px; 
 
\t transition: all .2s ease; 
 
} 
 

 
#Top-Bar.secondShrink 
 
{ 
 
\t height: 50px; 
 
} 
 

 
.content 
 
{ 
 
\t content: ""; 
 
\t height: 1200px; 
 
\t position: relative; 
 
\t z-index: 1; 
 
}

<div id="Top-Bar"> 
 
<h1>Site Title</h1> 
 
</div> 
 

 
<div class="content"></div>