动画导航栏上的增量缩小

Question

我创建了一个固定的动画导航栏，在滚动时收缩。目前，如果ypos＆gt;它从150收缩到100。 10.

但是，我想为缩小添加第二阶段。所以如果ypos＆gt; 10但是＆lt; 40，它执行状态1，如果它大于40，则执行状态2，从100减少到50.

问题：我可以让第一阶段工作，但我不知道如何观察缩小的第二个状态或如何添加改变第一个阶段的第二个阶段。

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>

我正在尝试从以下页面重新创建效果：http://www.newmediacampaigns.com/blog/responsive-site-header

Answer 1

正如我在评论中提到的那样：

  

在yPos 0页面的第一个滚动条上，将secondShrink添加到顶部栏。在任何时候你都没有删除它，所以从这里开始，顶部栏将始终有.secondShrink。因此，正常的.shrink永远不会被击中。

我已经修改了下面的代码，以便一次只有一个缩小附加到顶部栏。此外，您的if和if else不会对来自1-10或39-40的任何内容负责。方便地，一个鼠标滚轮点击或一个向下箭头单击正好40像素。

查看此清理版本：

＆＃13;

＆＃13;

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)

＆＃13;

#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;
}

＆＃13;

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

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

＆＃13;

＆＃13;

＆＃13;