html - 当我向下滚动我的网页时，如何确保我的下拉图标永远不会离开它的位置？

Question

当我滚动到网页底部时，我一直试图阻止我的下拉图标滚动。单击图标后，我使用 JavaScript 将新类添加到 .List。在单击之前，它会按应有的方式运行，即使有绝对位置，它仍然会在我开始滚动的那一刻离开右上角。

@media only screen and (max-width: 768px) {
    ul.List li a.nav-link {
        list-style: none;
        display: none;
    }

  ul.List li a.nav-link {
    display: none;
    
  }
  ul.List li.dropdown-icon {
	top: 10px;
	right: 20px;
    position: relative;
    display: block;
/*    padding-top: 12px;*/
    height: auto;
    min-height: 33px;
    overflow: hidden;
    font-size: 0.9em;
      
}
 ul.List.responsive li {
    position: relative;
    top: 30px;
    }
ul.List.responsive li.dropdown-icon {
     position:absolute;
    top: 10px;
    right: 20px;
    }
ul.List.responsive {
  	flex-direction: column;

  }
   

 ul.List.responsive li a {
 	display: block;
 	text-decoration: none;
  	list-style: none;
     

 }
    
    

   

}

<nav class="Top-Nav  container ">
   	<div class="brandName"><span id="cap">c</span>rib<span id="frm-style">Farm</span></div>
   	<ul class="List" id="dropDownclick">
   		<li class="show-responsive"><a class="nav-link" href="#"><i class="fa fa-home" aria-hidden="true"></i>Home</a></li>
   		<li class="show-responsive"><a class="nav-link" href="#">Gallery</a></li>
   		<li class="show-responsive"><a class="nav-link" href="#">Our goal</a></li>
   		<li class="show-responsive"><a class="nav-link" href="#">Who we are</a></li>
   		<li class="show-responsive"><a class="nav-link" href="#">Contact us</a></li>
   		<li class="dropdown-icon" id="d-icon"><a onclick="dropDownMenu()" href="#" >&#9776</a></li>
   	</ul>
   </nav>

Answer 1

试试这个——

.Top-Nav {
    position: fixed;
    top: 0;
    left: 0;
}