带标题的粘性导航

Question

我已经制作了一个带有粘性标题的导航，当您滚动

时会缩小一点

我希望在导航仪上方有一个大图像，因此用户必须向下滚动，导航将上升并最终固定到位。我找不到教程了。有人能指出我正确的方向吗？

＆＃13;

＆＃13;

function myScroll()
{
  var header = document.getElementById("header");
  var title = document.getElementById("title");
  var yPos = window.pageYOffset;
  var nav = document.getElementById("myNav")
  
  if(yPos > 300)
  {
    header.style.height = "80px";
    title.classList.add("shrink");
    nav.style.marginTop = "25px";
  }
  else
  {
    header.style.height = "150px";
    title.classList.remove("shrink");
    nav.style.marginTop = "90px";
  }
};


window.addEventListener("scroll", myScroll);

＆＃13;

*
{
  margin: 0;
  padding:0;
}

#header
{
  height: 150px;
  width: 100%;
  position: fixed;
  background-color: #F6F6F6;
  transition: all .3s;
  z-index: 100;
  overflow: hidden;
  top:0;
  left: 0;
}

#title
{
  margin-top: 50px;
  font-size: 50px;
  transition: all .3s;
  float: left;
}

#title.shrink
{
  font-size: 25px;
  margin-top: 25px;
}

nav
{
  color: #aaa;
  float: right;
  margin-right: 20%;
	font-weight: 700;
	font-size: 1.4em;
  margin-top: 90px;
  transition: all .3s;
}

#content
{
  height: 2000px;
  border:1px solid #ccc;
  margin-top: 160px;
  width: 100%;
}

＆＃13;

<div id="header">
  <h1 id="title">Animated Scroll</h1>
  
  <nav id="myNav">
    <a href="">Link 1</a>
    <a href="">Link 1</a>
    <a href="">Link 1</a>
  </nav>
</div>

<div id="content"></div>

＆＃13;

＆＃13;

＆＃13;