原生js實現(xiàn)吸頂效果

第原生js實現(xiàn)吸頂效果1.div初始居普通文檔流中

2.給window添加scroll事件（可事件節(jié)流），獲取div的offset的top值，滾動時scrollTop值和top比較，當?shù)竭_top時給div添加一個fixed的class使其固定

3.向上滾動時當?shù)竭_div初始top時則刪除fixed的class，此時div又回到普通文檔流中

4.fixed樣式非IE6瀏覽器使用position:fixed，IE6使用position:absolute和IEexpression

效果圖：

代碼如下：

!doctypehtml

html

head

metacharset="utf-8"

title無標題文檔/title

style

margin:0;

padding:0;

#div1{

width:100%;

height:50px;

background:skyblue;

/style

script

window.onload=function(){

varoDiv=document.getElementById('div1');

vardivT=oDiv.offsetTop;

//console.log(divT);

window.onscroll=function(){

//獲取當前頁面的滾動條縱坐標位置（依次為火狐谷歌、safari、IE678）

varscrollT=document.documentElement.scrollTop||window.pageYOffset||document.body.scrollTop;

if(scrollT=divT){

if(window.navigator.userAgent.indexOf('MSIE6.0')!=-1){

//兼容IE6代碼

oDiv.style.position='absolute';

oDiv.style.top=scrollT+'px';

oDiv.style.left=0+'px';

}else{

//正常瀏覽器代碼

oDiv.style.position='fixed';

oDiv.style.top=0;

oDiv.style.left=0;

}else

oDiv.style.position='';

/script

/head

body

div

以上br

以上br

以上br

以上br

以上br

以上br

以上br

divid="div1"/div

啦啦啦啦啦br

啦啦啦啦啦br

啦啦啦啦啦br

啦啦啦啦啦br

啦啦啦啦啦br

啦啦啦啦啦br

啦啦啦啦啦br

啦啦啦啦啦br

啦啦啦啦啦br

啦啦啦啦啦br

啦啦啦啦啦br

啦啦啦啦啦br

啦啦啦啦啦br

啦啦啦啦啦br

啦啦啦啦啦br

啦啦啦啦啦br

啦啦啦啦啦br

啦啦啦啦啦br

啦啦啦啦啦br

啦啦啦啦啦br

啦啦啦啦啦br

啦啦啦啦啦br

啦啦啦啦啦br

啦啦啦啦啦br

啦啦啦啦啦br

啦啦啦啦啦br

啦啦啦啦啦br

啦啦啦啦啦br

啦啦啦啦啦br

啦啦啦啦啦br

啦啦啦啦啦br

啦啦啦啦啦br

啦啦啦啦啦br

啦啦啦啦啦br

啦啦啦啦啦br

啦啦啦啦啦br

啦啦啦啦啦br

啦啦啦啦啦br

啦啦啦啦啦br

啦啦啦啦啦br

啦啦啦啦啦br

啦啦啦啦啦br

啦啦啦啦啦br

啦啦啦啦啦br

啦啦啦啦啦br

啦啦啦啦啦br

啦啦啦啦啦br

啦啦啦啦啦br

啦啦啦啦啦br

啦啦