 
/*測(cè)試用的高度*/ 
body{ height:3000px;} 
div,ul,li,body{margin:0; padding:0;} 
/*position:absolute;用于元素的定位*/ 
#roll{width:50px; height:100px; background:#99CC00; position:absolute;} 

Html代碼：

復(fù)制代碼代碼如下:

 
<body> 
<div id="roll"></div> 
</body> 

JS代碼：

復(fù)制代碼代碼如下:

 
var roll=document.getElementById('roll'), 
initX=0, 
initY, 
compY, 
sp=15, 
//可調(diào)整時(shí)間間隔，步進(jìn)值不宜過大，不然IE下有點(diǎn)閃屏； 
timeGap=5, 
doc=document.documentElement, 
docBody=document.body; 
compY=initY=200; 
roll.style.right=initX+"px"; 
;(function(){ 
var curScrollTop=(doc.scrollTop||docBody.scrollTop||0)-(doc.clientTop||docBody.clientTop||0); 
//每次comP的值都不一樣；直到roll.style.top===doc.scrollTop+initY； 
compY+=(curScrollTop+initY-compY)/sp; 
roll.style.top=Math.ceil(compY)+"px"; 
setTimeout(arguments.callee,timeGap); 
})(); 

您可能感興趣的文章:

頁面滾動(dòng)

相關(guān)文章

一篇文章讓你看懂Js繼承與原型鏈
原型鏈?zhǔn)且环N關(guān)系，實(shí)例對(duì)象和原型對(duì)象之間的關(guān)系,關(guān)系是通過原型(__proto__)來聯(lián)系的,下面這篇文章主要給大家介紹了關(guān)于Js繼承與原型鏈的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2021-12-12
用js閉包的方法實(shí)現(xiàn)多點(diǎn)標(biāo)注冒泡示例
這篇文章主要介紹了用js閉包的方法實(shí)現(xiàn)多點(diǎn)標(biāo)注冒泡,需要的朋友可以參考下
2014-05-05
Typescript3.9 常用新特性一覽(推薦)
這篇文章主要介紹了Typescript3.9 常用新特性一覽，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-05-05
fetch跨域問題的使用詳解
這篇文章主要介紹了fetch跨域問題的使用詳解,fetch 的核心主要包括：Request , Response , Header , Body，利用了請(qǐng)求的異步特性 --- 它是基于 promise 的，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下
2022-09-09
JavaScript中的LHS和RHS分析詳情
這篇文章主要介紹了JavaScript中的LHS和RHS分析詳情，?LHS??是賦值操作即可以看做是在往內(nèi)存中存儲(chǔ)值，而??RHS??是取值操作，它是從內(nèi)存中進(jìn)行檢索，下文更多相關(guān)資料介紹需要的小伙伴可以參考一下
2022-04-04
H5圖片壓縮與上傳實(shí)例
這篇文章主要為大家詳細(xì)介紹了H5圖片壓縮與上傳的實(shí)例，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-04-04
js實(shí)現(xiàn)頭像圖片切割縮放及無刷新上傳圖片的方法
這篇文章主要介紹了js實(shí)現(xiàn)頭像圖片切割縮放及無刷新上傳圖片的方法,涉及javascript結(jié)合php實(shí)現(xiàn)文件無刷新上傳等相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-07-07
js案例之鼠標(biāo)跟隨jquery版(實(shí)例講解)
下面小編就為大家?guī)硪黄猨s案例之鼠標(biāo)跟隨jquery版(實(shí)例講解)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-07-07
BootStrap注意事項(xiàng)小結(jié)（五）表單
這篇文章主要介紹了BootStrap注意事項(xiàng)小結(jié)（五）表單的相關(guān)資料，非常不錯(cuò)，具有參考借鑒價(jià)值，,需要的朋友可以參考下
2017-03-03
js中for...in循環(huán)對(duì)象時(shí)輸出key值順序混亂問題解決
很久之前就有前輩告訴我用for...in循環(huán)對(duì)象屬性的順序不是固定的,xiam?這篇文章主要給大家介紹了關(guān)于js中for...in循環(huán)對(duì)象時(shí)輸出key值順序混亂問題解決方法,需要的朋友可以參考下
2023-11-11