jQuery仿京东商城楼梯式导航定位菜单

前端技术 2023/09/04 JavaScript

实现京东商城楼梯式导航定位菜单：滚动定位菜单项和点击定位菜单项！

涉及知识点：find()、parent()、offset(）、scroll()等jQ函数，请自觉复习各种函数！

html代码：

<!-- 导航菜单 -->
 <div id=\"menu\">
  <ul>
   <li>1F<span>服饰</span></li>
   <li>2F<span>美妆</span></li>
   <li>3F<span>手机</span></li>
   <li>4F<span>家电</span></li>
   <li>5F<span>数码</span></li>
   <li>6F<span>运动</span></li>
   <li>7F<span>居家</span></li>
   <li>8F<span>母婴</span></li>
   <li>9F<span>食品</span></li>
   <li>10F<span>图书</span></li>
   <li>11F<span>服务</span></li>
  </ul>
 </div>
 <!-- 导航菜单 -->
 <!-- 产品内容 -->
 <div id=\"content\">
  <img src=\"images/head.png\" alt=\"\" style=\"border:1px solid red;\">
  <div class=\"louti\" id=\"louti1\"><img src=\"images/f1.png\" alt=\"\"></div>
  <div class=\"louti\" id=\"louti2\"><img src=\"images/f2.png\" alt=\"\"></div>
  <div class=\"louti\" id=\"louti3\"><img src=\"images/f3.png\" alt=\"\"></div>
  <div class=\"louti\" id=\"louti4\"><img src=\"images/f4.png\" alt=\"\"></div>
  <div class=\"louti\" id=\"louti5\"><img src=\"images/f5.png\" alt=\"\"></div>
  <div class=\"louti\" id=\"louti6\"><img src=\"images/f6.png\" alt=\"\"></div>
  <div class=\"louti\" id=\"louti7\"><img src=\"images/f7.png\" alt=\"\"></div>
  <div class=\"louti\" id=\"louti8\"><img src=\"images/f8.png\" alt=\"\"></div>
  <div class=\"louti\" id=\"louti9\"><img src=\"images/f9.png\" alt=\"\"></div>
  <div class=\"louti\" id=\"louti10\"><img src=\"images/f10.png\" alt=\"\"></div>
  <div class=\"louti\" id=\"louti11\"><img src=\"images/f11.png\" alt=\"\"></div>
 </div>
 <!-- 产品内容 -->
 <!-- 底部 -->
 <div id=\"footer\" class=\"container\"></div>

css代码：

#menu{
  width:32px;height:360px;
  position:fixed;
  top:200px;left:0px;
  display: none;
 }
 #menu ul li{
  width:32px;height:32px;
  list-style-type:none;
  color:#8F8583;
  text-align:center;
  line-height: 32px;
  border-bottom:1px dotted #ddd;
  position:relative;
 }
 #menu ul li span{
  display:block;width:32px;height:32px;
  background:#C81623;
  position:absolute;
  top:0;left:0;
  color:#fff;font-size:12px;
  display: none;
 }
 #menu ul li:hover span{display:block; }
 #menu ul li span.active{color:#C81623;background:#fff;display:block;}
 #content{
  width:1220px;
  margin:0 auto;
 } 
 #footer{width:1220px;height:600px;background:#FE7678;}
 .container{margin:0 auto;}

jQuery代码：

$(function(){
  var _index=0;
  $(\"#menu ul li\").click(function(){
   $(this).find(\"span\").addClass(\"active\").parent().siblings().find(\"span\").removeClass(\"active\");
   _index=$(this).index()+1;
   //通过拼接字符串获取元素，再取得相对于文档的高度
   var _top=$(\"#louti\"+_index).offset().top;
   //scrollTop滚动到对应高度
   $(\"body,html\").animate({scrollTop:_top},500);
  });
  var nav=$(\"#menu\"); //得到导航对象
  var win=$(window); //得到窗口对象
  var sc=$(document);//得到document文档对象。
  win.scroll(function(){

   if(sc.scrollTop()>=600){
   $(\"#menu\").show(); 
   //获取滚动元素对应的索引!!!重难点
   var index=Math.floor(sc.scrollTop()/600);

   $(\"#menu ul li span\").eq(index-1).addClass(\"active\").parent().siblings().find(\"span\").removeClass(\"active\");
   }else{
   $(\"#menu\").hide();
   }
  });
 });

滚动中常用到的jQ写法：

 $(\"body,html\").animate({scrollTop:_top},500);

总结：相对来说，这是个蛮有趣的实践案例，但其中用到比较多的函数，结合了本案例比较特殊的html结构设计，需要理清滚动导航时候的条件判断。 

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

本文地址：https://www.stayed.cn/item/10414

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案