在有些網頁中我們會發現會有這樣的現象：某個div會隨着屏幕的滾動達到一定高度的時候位置就固定下來了。例如淘寶的導航條：
那麼這裏就需要用到JS的邏輯方法來實現了。
下面是HTML代碼簡單實現：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style type="text/css">
body{
width:40em;
margin:0 auto;
}
article{
float:left;
}
aside{
float:right;
}
p{
line-height:3em;
}
</style>
</head>
<body>
<article>
<p>這是一個段落</p><p>這是一個段落</p><p>這是一個段落</p><p>這是一個段落</p><p>這是一個段落</p><p>這是一個段落</p><p>這是一個段落</p><p>這是一個段落</p><p>這是一個段落</p><p>這是一個段落</p><p>這是一個段落</p><p>這是一個段落</p><p>這是一個段落</p><p>這是一個段落</p><p>這是一個段落</p><p>這是一個段落</p><p>這是一個段落</p><p>這是一個段落</p><p>這是一個段落</p><p>這是一個段落</p><p>這是一個段落</p><p>這是一個段落</p><p>這是一個段落</p><p>這是一個段落</p><p>這是一個段落</p><p>這是一個段落</p><p>這是一個段落</p><p>這是一個段落</p><p>這是一個段落</p><p>這是一個段落</p><p>內容</p><p>這是一個段落</p><p>這是一個段落</p><p>這是一個段落</p><p>這是一個段落</p><p>這是一個段落</p><p>這是一個段落</p><p>這是一個段落</p><p>這是一個段落</p><p>這是一個段落</p>
</article>
<aside>
<p>這裏會滾動</p><p>這裏會滾動</p><p>這裏會滾動</p>
<div id="fixPara"><p>這個段落到達一定高度會固定</p></div>
</aside>
<script type="text/javascript">
window.οnlοad=
function(){
var oDiv = document.getElementById("fixPara"),
H = 0,
Y = oDiv
while (Y) {
H += Y.offsetTop;
Y = Y.offsetParent;
}
window.onscroll = function()
{
var s = document.body.scrollTop || document.documentElement.scrollTop
if(s>H) {
oDiv.style = "position:fixed;top:0;"
} else {
oDiv.style = ""
}
}
}
</script>
</body>
</html>