时间戳

首页 > 解决方案 > 当我向下滚动网页时，如何确保我的下拉图标永远不会离开它的位置？

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

问题描述

当我滚动到网页底部时，我一直试图阻止我的下拉图标滚动。单击图标后，我使用 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>

标签： htmlcss

解决方案

试试这个 -

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

推荐阅读