您的位置：首页 > Web前端 > JavaScript

【JSP】导航栏悬停顶部简单特效

2015-12-05 15:14 417 查看

<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>

不过有些简陋。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航