思路一：监听onscroll事件，实时的计算滚出去的高度，不停的改变要定们的盒子的top值
思路二,技巧是既然固定定位有bug,那就直接让html,body的overflow为hidden，然后用里面的普通盒子实现绝对定位：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
html,
body {
padding:0;
margin:0;
_padding:0 1px;
_height:100%;
_overflow:hidden;
}
#scrollable {
_height:100%;
_width:100%;
_overflow:auto;
}
#fixed {
right:25px;
position:fixed;
_position:absolute;
width: 200px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<div id="fixed">This box is fixed.</div>
<div id="scrollable">
<div id="doc">
<br>第1行</br>
<br>第2行</br>
<br>第3行</br>
<br>第4行</br>
<br>第5行</br>
<br>第6行</br>
<br>第7行</br>
<br>第8行</br>
<br>第9行</br>
<br>第10行</br>
<br>第11行</br>
<br>第12行</br>
<br>第13行</br>
<br>第14行</br>
<br>第15行</br>
<br>第16行</br>
<br>第17行</br>
<br>第18行</br>
<br>第19行</br>
<br>第20行</br>
<br>第21行</br>
<br>第22行</br>
<br>第23行</br>
<br>第24行</br>
<br>第25行</br>
<br>第26行</br>
<br>第27行</br>
<br>第28行</br>
<br>第29行</br>
<br>第30行</br>
<br>第31行</br>
<br>第32行</br>
<br>第33行</br>
<br>第34行</br>
<br>第35行</br>
<br>第36行</br>
<br>第37行</br>
<br>第38行</br>
<br>第39行</br>
<br>第40行</br>
<br>第41行</br>
<br>第42行</br>
<br>第43行</br>
<br>第44行</br>
<br>第45行</br>
<br>第46行</br>
<br>第47行</br>
<br>第48行</br>
<br>第49行</br>
<br>第50行</br>
<br>第51行</br>
<br>第52行</br>
<br>第53行</br>
<br>第54行</br>
<br>第55行</br>
<br>第56行</br>
<br>第57行</br>
<br>第58行</br>
<br>第59行</br>
<br>第60行</br>
<br>第61行</br>
<br>第62行</br>
<br>第63行</br>
<br>第64行</br>
<br>第65行</br>
<br>第66行</br>
<br>第67行</br>
<br>第68行</br>
<br>第69行</br>
<br>第70行</br>
<br>第71行</br>
<br>第72行</br>
<br>第73行</br>
<br>第74行</br>
<br>第75行</br>
<br>第76行</br>
<br>第77行</br>
<br>第78行</br>
<br>第79行</br>
<br>第80行</br>
<br>第81行</br>
<br>第82行</br>
<br>第83行</br>
<br>第84行</br>
<br>第85行</br>
<br>第86行</br>
<br>第87行</br>
<br>第88行</br>
<br>第89行</br>
<br>第90行</br>
<br>第91行</br>
<br>第92行</br>
<br>第93行</br>
<br>第94行</br>
<br>第95行</br>
<br>第96行</br>
<br>第97行</br>
<br>第98行</br>
<br>第99行</br>
<br>第100行</br>
<br>第101行</br>
<br>第102行</br>
<br>第103行</br>
<br>第104行</br>
<br>第105行</br>
<br>第106行</br>
<br>第107行</br>
<br>第108行</br>
<br>第109行</br>
<br>第110行</br>
<br>第111行</br>
<br>第112行</br>
<br>第113行</br>
<br>第114行</br>
<br>第115行</br>
<br>第116行</br>
<br>第117行</br>
<br>第118行</br>
<br>第119行</br>
<br>第120行</br>
<br>第121行</br>
<br>第122行</br>
<br>第123行</br>
<br>第124行</br>
<br>第125行</br>
<br>第126行</br>
<br>第127行</br>
<br>第128行</br>
<br>第129行</br>
<br>第130行</br>
<br>第131行</br>
<br>第132行</br>
<br>第133行</br>
<br>第134行</br>
<br>第135行</br>
<br>第136行</br>
<br>第137行</br>
<br>第138行</br>
<br>第139行</br>
<br>第140行</br>
<br>第141行</br>
<br>第142行</br>
<br>第143行</br>
<br>第144行</br>
<br>第145行</br>
<br>第146行</br>
<br>第147行</br>
<br>第148行</br>
<br>第149行</br>
<br>第150行</br>
<br>第151行</br>
<br>第152行</br>
<br>第153行</br>
<br>第154行</br>
<br>第155行</br>
<br>第156行</br>
<br>第157行</br>
<br>第158行</br>
<br>第159行</br>
<br>第160行</br>
<br>第161行</br>
<br>第162行</br>
<br>第163行</br>
<br>第164行</br>
<br>第165行</br>
<br>第166行</br>
<br>第167行</br>
<br>第168行</br>
<br>第169行</br>
<br>第170行</br>
<br>第171行</br>
<br>第172行</br>
<br>第173行</br>
<br>第174行</br>
<br>第175行</br>
<br>第176行</br>
<br>第177行</br>
<br>第178行</br>
<br>第179行</br>
<br>第180行</br>
<br>第181行</br>
<br>第182行</br>
<br>第183行</br>
<br>第184行</br>
<br>第185行</br>
<br>第186行</br>
<br>第187行</br>
<br>第188行</br>
<br>第189行</br>
<br>第190行</br>
<br>第191行</br>
<br>第192行</br>
<br>第193行</br>
<br>第194行</br>
<br>第195行</br>
<br>第196行</br>
<br>第197行</br>
<br>第198行</br>
<br>第199行</br>
<br>第200行</br>
<br>第201行</br>
<br>第202行</br>
<br>第203行</br>
<br>第204行</br>
<br>第205行</br>
<br>第206行</br>
<br>第207行</br>
<br>第208行</br>
<br>第209行</br>
<br>第210行</br>
<br>第211行</br>
<br>第212行</br>
<br>第213行</br>
<br>第214行</br>
<br>第215行</br>
<br>第216行</br>
<br>第217行</br>
<br>第218行</br>
<br>第219行</br>
<br>第220行</br>
<br>第221行</br>
<br>第222行</br>
<br>第223行</br>
<br>第224行</br>
<br>第225行</br>
<br>第226行</br>
<br>第227行</br>
<br>第228行</br>
<br>第229行</br>
<br>第230行</br>
<br>第231行</br>
<br>第232行</br>
<br>第233行</br>
<br>第234行</br>
<br>第235行</br>
<br>第236行</br>
<br>第237行</br>
<br>第238行</br>
<br>第239行</br>
<br>第240行</br>
<br>第241行</br>
<br>第242行</br>
<br>第243行</br>
<br>第244行</br>
<br>第245行</br>
<br>第246行</br>
<br>第247行</br>
<br>第248行</br>
<br>第249行</br>
<br>第250行</br>
<br>第251行</br>
<br>第252行</br>
<br>第253行</br>
<br>第254行</br>
<br>第255行</br>
<br>第256行</br>
<br>第257行</br>
<br>第258行</br>
<br>第259行</br>
<br>第260行</br>
<br>第261行</br>
<br>第262行</br>
<br>第263行</br>
<br>第264行</br>
<br>第265行</br>
<br>第266行</br>
<br>第267行</br>
<br>第268行</br>
<br>第269行</br>
<br>第270行</br>
<br>第271行</br>
<br>第272行</br>
<br>第273行</br>
<br>第274行</br>
<br>第275行</br>
<br>第276行</br>
<br>第277行</br>
<br>第278行</br>
<br>第279行</br>
<br>第280行</br>
<br>第281行</br>
<br>第282行</br>
<br>第283行</br>
<br>第284行</br>
<br>第285行</br>
<br>第286行</br>
<br>第287行</br>
<br>第288行</br>
<br>第289行</br>
<br>第290行</br>
<br>第291行</br>
<br>第292行</br>
<br>第293行</br>
<br>第294行</br>
<br>第295行</br>
<br>第296行</br>
<br>第297行</br>
<br>第298行</br>
<br>第299行</br>
<br>第300行</br>
</div>
</div>
</body>
</html>
思路三：利用css表达式
* html {
background: url(css-101);
}
#footer {
position: fixed;
bottom: 0;
_position: absolute;
_top: expression(eval(document.compatMode && document.compatMode=='CSS1Compat')
? documentElement.scrollTop +(documentElement.clientHeight-this.clientHeight)
: document.body.scrollTop +(document.body.clientHeight-this.clientHeight));
}
扫一扫
105
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
