<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>网页定位导航效果扩展案例</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
font-size: 12px;
line-height: 1.7;
background-color: #888;
}
li {
list-style: none;
}
#content {
width: 1000px;
margin: 0 auto;
padding-top: 100px;
padding-bottom: 700px;
}
#content.item{
position:relative;
height:540px;
}
#content .item img {
position: absolute;
top: 100px;
left: 50%;
}
#content #item1 {
background: url("http://img.mukewang.com/536c9ea800013ae610000540.jpg") no-repeat center top;
}
#content #item2 {
background: url("http://img.mukewang.com/536c9ecd0001606d10000540.jpg") no-repeat center top;
}
#content #item3 {
background: url("http://img.mukewang.com/536c9f0a0001ccc310000540.jpg") no-repeat center top;
}
#content #item4 {
background: url("http://img.mukewang.com/536c9f6700012e9010000540.jpg") no-repeat center top;
}
#content #item5 {
background: url("http://img.mukewang.com/536c9f800001b28510000540.jpg") no-repeat center top;
}
#menu{
position:fixed;
top:100px;
left:50%;
margin-left:-700px;
}
#menu h1 {
width: 200px;
color: #fff;
font-size: 14px;
text-align: center;
background: #ee1111;
line-height: 30px;
}
#menu ul li a {
display: block;
margin: 5px 0;
font-size: 12px;
color: #ccc;
width: 160px;
padding: 10px 20px;
text-decoration: none;
text-align: left;
border-bottom: 1px dashed #999;
}
#menu ul li a strong {
color: #f1f1f1;
}
#menu ul li a:hover,
#menu ul li a.current {
color: #fff;
background: #666;
}
/*ie6 hack*/
* html, * html body {
background-image: url(about:blank);
background-attachment: fixed;
}
* html #menu {
/*position: fixed;*/
position: absolute;
top: expression(((e=document.documentElement.scrollTop)?e:document.body.scrollTop)+100+'px');
}
</style>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.js"></script>
<script>
$(document).ready(function () {
$(window).scroll(function () {
var items = $("#content").find(".item");
var menu = $("#menu");
var top = $(document).scrollTop();
var currentId = ""; //滚动条现在所在位置的item id
items.each(function () {
var m = $(this);
//注意：m.offset().top代表每一个item的顶部位置
if (top > m.offset().top - 300) {
currentId = "#" + m.attr("id");
} else {
return false;
}
});
var currentLink = menu.find(".current");
if (currentId && currentLink.attr("href") != currentId) {
currentLink.removeClass("current");
menu.find("[href=" + currentId + "]").addClass("current");
}
});
});
</script>
</head>
<body>
<div id="menu">
<h1>正在首发</h1>
<ul>
<li><a href="#item1" class="current"><strong>2014.04.09</strong><br>施华蔻0元赢Smart</a></li>
<li><a href="#item2"><strong>2014.04.05</strong><br>alienware机皇限量抢</a></li>
<li><a href="#item3"><strong>2014.04.04</strong><br>联想Miix2 3G平板电脑</a></li>
<li><a href="#item4"><strong>2014.04.03</strong><br>御爵厨房垃圾处理器</a></li>
<li><a href="#item5"><strong>2014.04.01</strong><br>中兴天机GRAND S II</a></li>
</ul>
</div>
<div id="content">
<div id="item1" class="item">
<img src="http://img.mukewang.com/536ca02800014e7105000400.jpg">
</div>
<div id="item2" class="item">
<img src="http://img.mukewang.com/536ca04b0001dbeb04520519.jpg">
</div>
<div id="item3" class="item">
<img src="http://img.mukewang.com/536ca06200016a4d03950387.jpg">
</div>
<div id="item4" class="item">
<img src="http://img.mukewang.com/536ca0ab0001c89205000400.jpg">
</div>
<div id="item5" class="item">
<img src="http://img.mukewang.com/536ca0830001b17f05000400.jpg">
</div>
</div>
</body>
</html>
KevenHuang
相关分类