云南網(wǎng)站建設(shè)創(chuàng)新企業(yè) 昆明多彩網(wǎng)絡(luò)公司

在線qq:540105663

純css實(shí)現(xiàn)無(wú)動(dòng)跳隨網(wǎng)頁(yè)滾動(dòng)代碼(有demo)

來(lái)源:昆明多彩網(wǎng)絡(luò)公司 日期:2011-03-29 閱讀: 發(fā)表評(píng)論

網(wǎng)絡(luò)上看到的大部分都是有滾動(dòng)效果,但是美中不足就是層在滾動(dòng)的時(shí)候發(fā)生跳動(dòng),像是卡殼了一樣,這里介紹的是無(wú)跳動(dòng)隨網(wǎng)頁(yè)滾動(dòng),兼容所有瀏覽器。

demo:點(diǎn)擊預(yù)覽 

前臺(tái)的html代碼非常的簡(jiǎn)潔: 

<div id="sro">昆明多彩科技是<a href="http://libertymanufacturedhomes.com">云南網(wǎng)站建設(shè)</a>專業(yè)的公司。</div>

css代碼: 

#sro{width:90px;height:auto;position:fixed;z-index:2;border:1px solid #FB8511;background:#fff;_position:absolute;_top:expression(eval(document.documentElement.scrollTop));}

* html{background-image:url(about:blank);background-attachment:fixed;}

注意sro中的css樣式的下劃線_是為了兼容ie6瀏覽器(萬(wàn)惡的IE6),下面的* html也是為了防止層在滾動(dòng)的時(shí)候發(fā)生跳動(dòng)的情況發(fā)生。

該教程由多彩科技原創(chuàng),轉(zhuǎn)載請(qǐng)注明出處。

發(fā)表評(píng)論評(píng)論列表(有 條評(píng)論)