欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

側(cè)欄跟隨滾動(dòng)的簡(jiǎn)單實(shí)現(xiàn)代碼

 更新時(shí)間：2013年03月18日 14:28:32   作者：  
側(cè)欄里的有些內(nèi)容滾動(dòng)到頁(yè)面頂端以后就固定在那個(gè)位置，不再跟隨滾動(dòng)條而滾動(dòng)，想必很多站長(zhǎng)朋友都想實(shí)現(xiàn)這個(gè)效果吧，接下來(lái)為大家詳細(xì)介紹下，感興趣的你可不要錯(cuò)過(guò)了哈
瀏覽網(wǎng)站時(shí)經(jīng)?？吹接械木W(wǎng)站上，側(cè)欄里的有些內(nèi)容滾動(dòng)到頁(yè)面頂端以后就固定在那個(gè)位置，不再跟隨滾動(dòng)條而滾動(dòng)。這種效果叫做“側(cè)欄跟隨滾動(dòng)”。它對(duì)于那些不希望被滾動(dòng)到頁(yè)面之外的內(nèi)容是非常有用的。
側(cè)欄跟隨滾動(dòng)的實(shí)現(xiàn)方法有很多種，比較常見(jiàn)的有兩種，這兩種方法在NEOEASE寫的一篇文章中介紹的很清楚，一種是借助jQuery來(lái)實(shí)現(xiàn)，這種方法對(duì)于那些平時(shí)不需要加載jQuery庫(kù)的網(wǎng)站來(lái)說(shuō)，顯然是一種負(fù)擔(dān)（jQuery現(xiàn)在是越做越大了……）。另外一種方法是通過(guò)原生javascript編寫的效果，這種方法相比上一種，要輕盈得多。但是，我還是不夠滿足，原生的javascript寫的文件也有4K多，對(duì)于我這種至簡(jiǎn)至上的人來(lái)說(shuō)，還是太繁雜了。那么有沒(méi)有更簡(jiǎn)單的實(shí)現(xiàn)辦法呢？

答案當(dāng)然是肯定的。下面具體介紹。
先說(shuō)html文件（當(dāng)然也可是動(dòng)態(tài)文件，里面總歸有html代碼的）
復(fù)制代碼 代碼如下:

<div id="box">
<div id="float" class="div1">
在這里加入需要跟隨滾動(dòng)的內(nèi)容
</div>
</div>

然后是CSS代碼
復(fù)制代碼 代碼如下:

#box{float:left; position:relative;width:250px;}
.div1{width:250px;}
.div2{position:fixed;_position:absolute;top:0;z-index:250;}

最后是JS代碼（可以放在需要滾動(dòng)的頁(yè)面中，也可以放在單獨(dú)的JS文件中再調(diào)用）
復(fù)制代碼 代碼如下:

(function(){
var oDiv=document.getElementById("float");
var H=0,iE6;
var Y=oDiv;
while(Y){H+=Y.offsetTop;Y=Y.offsetParent};
iE6=window.ActiveXObject&&!window.XMLHttpRequest;
if(!iE6){
window.onscroll=function()
{
var s=document.body.scrollTop||document.documentElement.scrollTop;
if(s>H){oDiv.className="div1 div2";if(iE6){oDiv.style.top=(s-H)+"px";}}
else{oDiv.className="div1";}
};
}
})();

OK，大功告成，夠簡(jiǎn)單吧。
最后給個(gè) 示例。

相關(guān)文章

  • 微信小程序分包的超詳細(xì)步驟

    微信小程序分包的超詳細(xì)步驟

    分包指的是把一個(gè)完整的小程序項(xiàng)目,按照需求劃分為不同的子包,在構(gòu)建時(shí)打包成不同的分包,用戶在使用時(shí)按需進(jìn)行加載,下面這篇文章主要給大家介紹了關(guān)于微信小程序分包的相關(guān)資料,需要的朋友可以參考下
    2022-09-09
  • 微信小程序wxs實(shí)現(xiàn)吸頂效果

    微信小程序wxs實(shí)現(xiàn)吸頂效果

    這篇文章主要為大家詳細(xì)介紹了微信小程序wxs實(shí)現(xiàn)吸頂效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2020-01-01
  • JavaScript 中實(shí)現(xiàn) use strict的方法及優(yōu)勢(shì)

    JavaScript 中實(shí)現(xiàn) use strict的方法及優(yōu)勢(shì)

    本教程將討論JavaScript中的use strict特性,在這里,我們將通過(guò)不同的示例了解如何在JavaScript代碼語(yǔ)句中創(chuàng)建和執(zhí)行use strict關(guān)鍵字,需要的朋友可以參考下
    2023-09-09
  • 淺析Javascript中雙等號(hào)(==)隱性轉(zhuǎn)換機(jī)制

    淺析Javascript中雙等號(hào)(==)隱性轉(zhuǎn)換機(jī)制

    這篇文章給大家詳細(xì)介紹了javascript中雙等號(hào)(==)隱性轉(zhuǎn)換機(jī)制，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下吧
    2017-10-10
  • 微信瀏覽器下拉黑邊解決方案 wScroollFix

    微信瀏覽器下拉黑邊解決方案 wScroollFix

    這篇文章主要介紹了微信瀏覽器下拉黑邊解決方案 wScroollFix,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
    2020-01-01
  • 微信小程序中slot插槽基本使用方法實(shí)例

    微信小程序中slot插槽基本使用方法實(shí)例

    之前竟然聽到有人跟我說(shuō)微信小程序沒(méi)有組件插槽功能,下面這篇文章主要給大家介紹了關(guān)于微信小程序中slot插槽基本使用方法的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2022-11-11
  • uniapp中使用計(jì)時(shí)器setInterval的場(chǎng)景與方法

    uniapp中使用計(jì)時(shí)器setInterval的場(chǎng)景與方法

    計(jì)時(shí)器在日常開發(fā)中經(jīng)常會(huì)遇到,下面這篇文章主要給大家介紹了關(guān)于uniapp中使用計(jì)時(shí)器setInterval的場(chǎng)景與方法,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2022-08-08
  • uniapp開發(fā)小程序的開發(fā)規(guī)范總結(jié)

    uniapp開發(fā)小程序的開發(fā)規(guī)范總結(jié)

    uni-app 是一個(gè)使用 vue.js 開發(fā)跨平臺(tái)應(yīng)用的前端框架,下面這篇文章主要給大家介紹了關(guān)于uniapp開發(fā)小程序的開發(fā)規(guī)范,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2022-07-07
  • js添加table的行和列 具體實(shí)現(xiàn)方法

    js添加table的行和列 具體實(shí)現(xiàn)方法

    這篇文章介紹了js添加table的行和列 具體實(shí)現(xiàn)方法，有需要的朋友可以參考一下
    2013-07-07
  • 使用script的src實(shí)現(xiàn)跨域和類似ajax效果

    使用script的src實(shí)現(xiàn)跨域和類似ajax效果

    在解決js的跨域問(wèn)題的時(shí)候， 有多種方式， 其中有一種是利用script標(biāo)簽的src屬性，因?yàn)檫@個(gè)屬性是不受域名限制的，我們可以直接讓src的這個(gè)鏈接指向跨域網(wǎng)站的一個(gè)接口， 這個(gè)接口返回的是js代碼或者json格式數(shù)據(jù)， 從而實(shí)現(xiàn)跨域獲取數(shù)據(jù)。
    2014-11-11

最新評(píng)論