JS-JQ Intelligent positioning of elements in page scrolling (top-other parts)

Read the premise: fully understand the div three ways of positioning: floating, relative positioning, absolute positioning

Method One (top)

Principle: Direct use of CSS control; disadvantage: incompatible ie6-;

implementation: position:fixed; top:0

Method Two (top)

Principle: Gets the height of the page being curled (LEN), copied to obj. STYLE. Top=len, shortcomings, the effect is not very smooth!

Realize:

var len=document.documentelement.scrolltop| | Document.body.scrollTop;

var Obj=document.document.getelementbyid ("id")

Obj.style.top=len

Method three (various parts)

This is on the Internet to find the JQ method, oneself also actually wrote once;

$.fn.smartfloat =function (){
var position =function (Element){
var top = element.position (). Top;
var pos = element.css ("Position");
$ (window). Scroll (function (){
 var scrolls = $ (This). ScrollTop ();
if (Scrolls > top){
if (window. XMLHttpRequest){
ELEMENT.CSS ({
Position"Fixed",
Top0
}). addclass ("Shadow");
}Else{
ELEMENT.CSS ({
Top:scrolls
 });
}
}Else{
ELEMENT.CSS ({
Position:pos,
Top:top
  "shadow");              }  
               };  
     return $ ( Span class= "Js__operator" >this). each (function ()  {  
         position ($ (this));                             
      };  
            

Call

$(function(){ 
    $("#nav").smartFloat(); 
}); 

ps:边框加阴影的css代码；

  .shadow{-moz-box-shadow:1px  1px 2px rgba (0,< Span class= "Css__number" >0,0,. 2);  -webkit-box-shadow:1px 1px 2PX&NBSP;&NBSP; 
 Rgba (0,0, 0,. 2)  box-shadow:1px 1px  2px rgba (0,0,0,. 2);}                  

JS-JQ Intelligent positioning of elements in page scrolling (top-other parts)