在網(wǎng)頁里經(jīng)常遇到這樣的情況，滑動頁面至某一個元素處云矫，元素一直固定在頂部或底部膳沽，當頁面滑到元素原有位置上方時，元素恢復原有位置。例如京東秒殺的活動時間挑社，還有常見的搜索輸入框固定在頂部呵俏。
利用js寫了個搜索輸入框固定在上方的例子，效果示例如下：
主要用到了offsetTop與scrollTop滔灶。
offsetTop:元素到其上級層頂部的距離.
scrollTop:網(wǎng)頁被卷去的高
當網(wǎng)頁滾動條卷起來的高度大于需要固定定位元素距離頂部的高時，就可以設(shè)置固定定位樣式了吼肥。
代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0' />
<style type="text/css">
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
max-width: 750px;
margin:0 auto;
}
.container ul{
padding: 0 20px;
list-style: none;
}
.container>img{
width: 100%;
}
.container .input{
padding: 0 10px;
}
.container .input input{
width: 100%;
border: 1px solid #d6d6d6;
outline: none;
height: 30px;
border-radius: 10px;
}
.container ul li{
margin-top: 50px;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div>
<div class="container">
<img src="top_banner.jpg"/>
<div class="input" id="searchBar">
<input type="text" />
</div>
<ul>
<li>我是列表</li>
<li>我是列表</li>
<li>我是列表</li>
<li>我是列表</li>
<li>我是列表</li>
<li>我是列表</li>
<li>我是列表</li>
<li>我是列表</li>
<li>我是列表</li>
<li>我是列表</li>
<li>我是列表</li>
</ul>
</div>
</div>
<script type="text/javascript">
window.onload=
function(){
var oDiv = document.getElementById("searchBar"),
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;left:0;right:0;"
} else {
oDiv.style = ""
}
}
}
</script>
</body>
原文作者技術(shù)博客：http://www.reibang.com/u/ac4daaeecdfe
