如何实现导航栏固定在某一位置不会随滚动条的移动而改变

来源：互联网发布：云南进出口贸易数据编辑：程序博客网时间：2024/05/17 01:12

<body>

       <ul id="menuList">
           <li >
               <a>木有医用品</a>
               <p>1</p>
           </li>
           <li >
               <a>木有医用品</a>
               <p>2</p>
           </li>
           <li >
               <a>电动牙刷</a>
               <p>3</p>
           </li>
           <li>
               <a>衣服</a>
               <p>4</p>
           </li>
           <li>
               <a>袜子</a>
               <p>5</p>
           </li>
           <li>
               <a>女票</a>
               <p>6</p>
           </li>
           <li>
               <a>男朋友</a>
               <p>7</p>
           </li>
       </ul>
       <div style='width:100px;height: 2000px;background-color: red;'></div>
       <div style='width:100px;height: 2000px;background-color: yellow;'></div>
       <script>
//           var e = document.getElementById();
       </script>
   </body>

@charset "utf-8";
*{
   margin: 0;
   padding: 0;
}

#menuList li{
   width:120px;
   height: 40px;
   /*border:1px solid black;*/
   position:relative;
}

li a{
   /*块状显示*/
   display: block;
   width: 80px;
   height: 40px;
   /*background-color:orange ;*/
   text-align: right;
   line-height: 40px;

}

li p{
   width: 38px;;
   height: 38px;
   position: absolute;
   background: cyan;
   color:white;
   text-align: center;
   line-height: 38px;
   right: 1px;
   top:1px;

}

#menuList{
   /*它不会随内容的滚动而移动*/
   position: fixed;
   top:200px;
   left:-80px;
}

@keyframes out{
   0%{}
   100%{transform:translateX(80px);}
}

.out{
   animation:out 0.2s linear both ;
}

@keyframes in{
   0%{transform: translateX(80px);}
   100%{transform: translateX(0px);}
}
.in{
   animation: in 0.2s linear both;
}
/*.delay{
   animation-delay:0.1s ;
}*/

//页面加载完成之后会调用的事件
window.onload = function(){
   //为列表添加鼠标悬停监听onmouseXXX
   var list = document.getElementById('menuList');

   var lis = document.getElementsByTagName("li");

var time =0;
list.onmouseenter = function(){
   //将出现属性交给li并设置延迟
    //遍历li为每个li添加out属性
    for(var i=0;i<lis.length;i++){
       lis[i].className = "out";
       //用来设置css的属性
       lis[i].style.animationDelay=time+"s";
       time+=0.1;
    }

}

list.onmouseleave = function(){
   //将隐藏属性交个li并设置延迟
   for(var i=0;i<lis.length;i++){
       lis[i].className='in';
       lis[i].style.animationDelay=time+'s';
       time-=0.1;
   }
}
}

0 0