<head>
<title>ALong7yrone</title>
<style type="text/css">
.mydiv
{
height: 31px;
margin: 20px 0;
background-color: #fff;
border-bottom: 1px solid #ccc;
}
.mydiv span
{
display: inline-block;
height: 20px;
line-height: 20px;
border: 1px solid #ccc;
padding: 5px;
margin-right: 10px;
border-bottom: 0;
background-color: #fff;
}
</style>
<script type="text/javascript">
var mt = 0;
window.onload = function () {
var mydiv = document.getElementById("mydiv");
var mt = mydiv.offsetTop;
window.onscroll = function () {
var t = document.documentElement.scrollTop || document.body.scrollTop;
if (t > mt) {
mydiv.style.position = "fixed";
mydiv.style.margin = "0";
mydiv.style.top = "0";
}
else {
mydiv.style.margin = "20px 0";
mydiv.style.position = "static";
}
}
}
</script>
</head>
<body>
<div style="height: 400px; border: 1px solid #000;">
</div>
<div class="mydiv" id="mydiv">
<span style="position: relative; top: 1px;">商品详情</span><span>评价信息</span>
</div>
</body>
在此后添加N多行
<div>
效果演示
<br />
。。。。。。。。。。N多行
</div>
不过有些简陋。