JS imitation Taobao details page menu bar Intelligent Positioning effect

Similar to Taobao details page menu bar Smart positioning for everyone is not unfamiliar! As shown in the screenshot below: That part of the red box!

Basic principle:

is to use JS to listen for scrolling events, when the page's scrolling distance (the height of the page scrolling) is greater than or equal to the "object" (the object to scroll) from the top of the page height, that is, the scrolling object and the upper edge of the window contact, Change the Object Positioning property position value to fixed (fixed) immediately (except IE6 because the IE6 does not support fixed). For IE6 use absolute positioning position:absolute,top: is the "top of the browser scroll." In the IE6 browse to see there will be small jitter, but there is no way, Taobao details page looks like this deal with!

The Jsfiddle effect is as follows:

To see the effect, please click me!

The code is relatively simple! Don't say much! Directly paste code:

HTML is as follows:

<div class= "Container" >
<div style= "height:300px;" > I'm here to take a place, don't bother me! </div>
<div id = "NAV" class= "nav" >
<ul>
<li><a href= "#"             Baby Details </a></li>
<li class= "current" ><a href= "#" > Evaluation Details </a></li>
<li><a href= "#" > Transaction record (20000) </a></li>
</ul>
</div>
<div style= "height:1800px;" ></div>
</div>

The CSS code is as follows:

. container{width:720px;margin:0 Auto;}
* {margin:0;padding:0;}
Ol,ul{list-style:none}
. nav {width:720px;height:42px;position:absolute;margin:0 auto;border:1px solid #d3d3d3; Background: #f7f7f7;-moz-border-radius:2px; -webkit-border-radius:2px; border-radius:2px;}
. Nav li{float:left;height:42px;line-height:42px;padding:0 10px;border-right:1px solid #d3d3d3; font-size:14px; Font-weight:bold} 
. Nav li.current{background: #f1f1f1; border-top:1px solid #f60} 

nav li A{text-decorat Ion:none} 
. Nav li.current a{color: #333} 
. Nav li A:hover{color: #f30}

The JS code is as follows:

/**  * js imitation Taobao details page menu bar Intelligent positioning Effect  * constructor smartfloat  * @author Tugenhua  * @time 2014-1-15  */  function smartfloat (options) {          this.config = {  &

nbsp;     targetelem  :  ' #nav '  //DOM node     } to be positioned;

     This.cache = {};
     this.init (options); &NBSP}  smartfloat.prototype = {        constructor:smartfloat,   &nbs P Init:function (options) {        this.config = $.extend (This.config, Options {}); nbsp;       var self = this,              _config = self.config,             _cache =
Self.cache;              &NBsp;  var top = $ (_config.targetelem). Offset (). Top              pos = $ (_config.targetelem). css (' position '),          

   isIE6 = Navigator.userAgent.match (/msie 6.0/)!= null;         $ (window). Scroll (function () {      
      var wintop = $ (this). ScrollTop ();             if (wintop >= top) {                                  if (!isie6) {                     $ (_config.targetelem). css ({                         position: ' Fixed ',                          top:0     
               });                }else {                     $ (_ Config.targetelem). css ({                         position: ' Absolute ',                          Top: Wintop                  
  });                }             }else {                 $ (_config.targetelem). css ({                     Position:pos,                      Top:top     
           });            }        }
);

   }  };  //page Initialization  $ (function () {     new smartfloat ({       &
nbsp; });  });

Demo download