Home>

Realize the staircase navigation positioning menu of Jingdong Mall:scroll positioning menu items and click positioning menu items!

Knowledge points involved:find (), parent (), offset (), scroll ()JQ functions, please consciously review various functions!

html code:

<!-Navigation menu->
 <div>
  <ul>
   <li>1f<span>apparel</span></li>
   <li>2f<span>beauty</span></li>
   <li>3f<span>mobile phone</span></li>
   <li>4f<span>home appliances</span></li>
   <li>5f<span>digital</span></li>
   <li>6f<span>sport</span></li>
   <li>7f<span>Home</span></li>
   <li>8f<span>mother&child</span></li>
   <li>9f<span>food</span></li>
   <li>10f<span>books</span></li>
   <li>11f<span>service</span></li>
  </ul>
 </div>
 <!-Navigation menu->
 <!-Product Content->
 <div>
  <img src="images/head.png">
  <div><img src="images/f1.png"></div>
  <div><img src="images/f2.png"></div>
  <div><img src="images/f3.png"></div>
  <div><img src="images/f4.png"></div>
  <div><img src="images/f5.png"></div>
  <div><img src="images/f6.png"></div>
  <div><img src="images/f7.png"></div>
  <div><img src="images/f8.png"></div>
  <div><img src="images/f9.png"></div>
  <div><img src="images/f10.png"></div>
  <div><img src="images/f11.png"></div>
 </div>
 <!-Product Content->
 <!-Bottom->
 <div></div>

css code:

#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 code:

$(function () {
  var _index=0;
  $("#menu ul li"). click (function () {
   $(this) .find ("span"). addclass ("active"). parent (). siblings (). find ("span"). removeclass ("active");
   _index=$(this) .index () + 1;
   //Get elements by stitching strings,Then get the height relative to the document
   var _top=$("#louti" + _ index) .offset (). top;
   //scrolltop scroll to the corresponding height
   $("body, html"). animate ({scrolltop:_top}, 500);
  });
  var nav=$("#menu");//Get the navigation object
  var win=$(window);//Get the window object
  var sc=$(document);//Get the document document object.
  win.scroll (function () {
   if (sc.scrolltop ()>= 600) {
   $("#menu"). show ();
   //Get the index corresponding to the scroll element !!!
   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 ();
   }
  });
 });

The commonly used jq notation in scrolling:

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

Summary:Relatively speaking,This is a very interesting practical case.But more functions are used in it,Combining the special html structure design of this case,Need to clarify the condition judgment when scrolling navigation.

  • Previous Solution to the conflict between ThinkPHP and UCenter
  • Next Android viewpager example code to jump to main page after last page slide