JavaScript实现滑动导航栏效果

本文实例为大家分享了js实现滑动导航栏效果的具体代码，供大家参考，具体内容如下

 
  
  
   
  
  
  
   *{
    margin: 0;
    padding: 0;
   }
   .navScroll{
    position: relative;
   }
   #overflow{   
    width: 100%;
    height: 30px;
    overflow-x: scroll;
   } 
   #overflow .container{
    height: 30px;
   }
   #overflow .container div{
    float: left;
    width: 100px;
    height: 30px;
    line-height: 30px;
    text-align: center;
   }
   #overflow::-webkit-scrollbar {
    display: none;
    -webkit-overflow-scrolling: touch;
   } 
   .navScroll .drop_down{
    position: absolute;
    top: 0;
    right: 0;
    width: 50px;
    height: 30px;
   }
   .navScroll .drop_down img{
    width: 100%;
    height: 100%;
   }
   .tabUl.clearFix{
    display: none; 
    width: 100%;
    list-style: none;
    z-index: 10;
    background: rgba(0,0,0,.1);
   }
   .tabUl li{
    float: left;
    width: 6.25rem;
    height: 2.65625rem;
    line-height: 2.65625rem;;
    text-align: center;
   }
   .clearFix{
    content: "";
    display: table;
    clear: both;
   }
   div, ul{
    color: #89CFE8;
   }
   
   #overflow .container div.lastWidth{
    width: 50px;
   }
   .red{
    color: #FF9933;
   }
  
 
 
  
    
     
     
      item1 
      
     
      item2
      
     
      item3 
      
     
      item4
      
     
      item5 
      
     
      item6
      
     
      item7 
      
     
      item8
      
     
      item9
      
     
      item10 
      
     
      item11 
      
     
     
    
   
    
   
   

    
item1
    
item2
    
item3
    
item4
    
item5
    
item6
    
item7
    
item8
    
item9
    
item10
    
item11
    
   
  
 
 

导航栏可滑动

下拉点击会相应的改变导航栏

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。