アニメーション化されたナビゲーションバーのインクリメンタルシュリンク

Question

スクロール時に縮小されたアニメーション化された固定のナビゲーションバーを作成しました。現在のところ、ypos> 10の場合は150から100に縮小します。

しかし、私は縮小に第2段階を追加したいと思います。したがって、ypos> 10でも< 40の場合は状態1を実行し、40より大きい場合は状態2を実行し、100から50に縮小します。

問題：私は最初の段階では動作しますが、シュリンクの第2の状態を監視する方法や、最初のクラスを追加する2番目のクラスを追加する方法がわかりません。

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を追加します。あなたはそれを削除することは一切ありませんので、ここから上のバーには常にsecondsecrinkがあります。このため、通常の収縮は決して打撃を受けません。

一度に1つの縮小だけを上部バーに付けるように、以下のコードを修正しました。また、ifとif elseには、1-10、または39-40のものは含まれていません。便利なことに、1つのマウスホイールクリック、または1つの下向き矢印クリックは、正確に40ピクセルです。あなたは `else`を逃している

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>