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

Html代碼：

復制代碼代碼如下:

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

JS代碼：

復制代碼代碼如下:

 
var roll=document.getElementById('roll'), 
initX=0, 
initY, 
compY, 
sp=15, 
//可調整時間間隔，步進值不宜過大，不然IE下有點閃屏； 
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); 
})(); 

您可能感興趣的文章:

頁面滾動

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