Incremental Shrink on Animated Nav Bar

Question

I have created a fixed, animated nav bar that shrinks on scroll. Currently, it shrinks from 150 to 100 if the ypos > 10.

However, I would like to add a second stage to the shrink. So if ypos > 10 but < 40, it executes state 1 and, if it is greater than 40 it executes state 2 which will be a shrink from 100 to 50.

Problem: I can get the first stage working, but I am not sure how to watch for the second state of the shrink or how to add the second class that changes the first.

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

window.addEventListener("scroll", shrink)

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

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

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

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

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

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

I am attempting to recreate the effect from the following page: http://www.newmediacampaigns.com/blog/responsive-site-header

Answer 1

As I mentioned in the comments:

On the very first scroll of the page at yPos 0, you add secondShrink to the top bar. At no point do you ever remove it, so from here on out, the top bar will always have .secondShrink. Because of this, normal .shrink will never get hit.

I've modified your code below so that only one shrink at a time is attached to the top bar. Additionally, your if and if else don't account for anything from 1-10, or 39-40. Conveniently enough, one mouse wheel click, or one down-arrow click is exactly 40 pixels.

Check out this cleaned up version:

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

window.addEventListener("scroll", shrink)

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

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

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

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

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

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