基于JQuery和原生JavaScript实现网页定位导航特效

慕课网的一个小课程，练习了一遍，不足之处，欢迎指正（照片在本地，大家可以着重看代码哈）：

  
  
  
  
  html, body, div, ul, li, img, h1, h2 { margin: 0; padding: 0; }
  ul { list-style: none; }
  a { text-decoration: none; color: #333; }
  
  #menu { position: fixed; top: 100px; left: 50%; margin-left: 400px; }
  #menu > li > a { display: block; padding: 10px 15px; height: 30px; line-height: 30px; font-size: 14px; font-weight: bold; margin: 5px 0; }
  #menu > li > a:hover,
  #menu > li > a.current { color: #fff; background-color: #0088bb; }
  
  #content { width: 800px; margin: 30px auto; }
  h1 { color: #0088bb; font-size: 30px; margin-bottom: 10px; }
  .item { border: 1px dotted #0088bb; padding: 20px; margin-bottom: 20px; }
  .item > h2 { font-size: 16px; padding-bottom: 5px; border-bottom: 2px solid #0088bb; margin-bottom: 10px; }
  .item-list > li { display: inline-block; margin-right: 10px; }
  .item-list > li > a > img { width: 230px; height: 230px; border: none; 
  
  * html, * html body { background-image: url(about:blank); background-attachment: fixed; }
  * html #menu {  position: absolute; top: expression((e = document.documentElement.scrollTop ? e : document.body.scrollTop) + 100 + 'px'); }
  


  

    
1F 男装
    
2F 女装
    
3F 美妆
    
4F 数码
    
5F 母婴
  
  
    爱淘气购物网
    
      1F 男装
      

 

   
 
 

   
 
 

   
 
 

   
 
 

   
 
 

   
 
 

   
 
 

   
 
 

   
 
      
    
    
      2F 女装
      

 

   
 
 

   
 
 

   
 
 

   
 
 

   
 
 

   
 
 

   
 
 

   
 
 

   
 
      
    
    
      3F 美妆
      

 

   
 
 

   
 
 

   
 
 

   
 
 

   
 
 

   
 
 

   
 
 

   
 
 

   
 
      
    
    
      4F 数码
      

 

   
 
 

   
 
 

   
 
 

   
 
 

   
 
 

   
 
 

   
 
 

   
 
 

   
 
      
    
    
      5F 母婴
      

 

   
 
 

   
 
 

   
 
 

   
 
 

   
 
 

   
 
 

   
 
 

   
 
 

   
 
      
    
  
  
  

 下面再看下JS代码实现：

以上实例代码是小编给大家分享的JQuery和原生Javascript实现网页定位导航特效，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的，在此也非常感谢大家对脚本之间网站的支持！