滚动效果问题
幕布斯3621227
2016-11-13 13:14
照着老师讲解那样做了一遍，但是随着滚动条的滚动右侧到后来没有随着改变，是为什么
2回答
-
- 幕布斯3621227
- 2016-11-16 18:12:46
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>网页定位导航特效</title>
<style>
*{
margin:0;
padding:0;
}
body{
font-size:12px;
line-height:1.7;
}
li{
list-style:none;
}
#content{
width:800px;
margin:0 auto;
padding:20px;
}
#content h1{
color:#0088bb;
}
#content .item{
padding:20px;
margin-bottom:20px;
border: 1px dotted #0088bb;
}
#content .item h2{
font-size:16px;
font-weight:bold;
border-bottom:2px solid #0088bb;
margin-bottom:10px;
}
#content .item li{
display:inline;
margin-right:10px;
}
#content .item li a img{
width:230px;
height:230px;
border:none;
}
#menu{
position:fixed;
top:100px;
left:50%;
margin-left:400px;
width:70px;
}
#menu ul li a{
display:block;
margin:5px 0;
font-size:14px;
font-weight:bold;
color:#333;
width:80px;
height:50px;
line-height:50px;
text-decoration:none;
text-align:center;
}
#menu ul li a:hover,
#menu ul li a.current {
color: #fff;
background: #0088bb;
}
/*ie6 hack*/
* html, * html body {
background-image:url(about:blank);
background-attachment:fixed;
}
* html #menu {
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.min.js"></script>
<script>
$(document).ready(function() {
//滚动条发生滚动
$(window).scroll(function(){
//滚动条滚动的距离
var top = $(document).scrollTop();
//获取右侧导航的元素
var menu = $("#menu");
//获取所有item元素
var item = $("#content").find(".item");
var currentId = "";//当前所在的楼层(item) #id
//遍历每一层楼判断高度
item.each(function(){
var m = $(this);
//获取每个item的高度
var itemtop = m.offset().top;
if(top > itemtop - 200){
currentId = "#" + m.attr("id");
}else{
return false;
}
});
//给相应楼层的a 设置current，取消其他链接的current
var currrentLink = menu.find(".current");
if(currentId && currrentLink.attr("href") != currentId) {
currrentLink.removeClass("current");
menu.find("[href=" + currrentId +"]").addClass("current");
}
});
});
</script>
</head>
<body>
<div id="menu">
<ul>
<li><a href="#item1" class="current">1F 花海</a></li>
<li><a href="#item2">2F 沙漠</a></li>
<li><a href="#item3">3F 灯塔</a></li>
<li><a href="#item4">4F 动物</a></li>
</ul>
</div>
<div id="content">
<h1>大自然</h1>
<div id="item1" class="item">
<h2>1F 花海</h2>
<ul>
<li><a href="#"><img src="../images/1.jpg"></a></li>
<li><a href="#"><img src="../images/1.jpg"></a></li>
<li><a href="#"><img src="../images/1.jpg"></a></li>
<li><a href="#"><img src="../images/2.jpg"></a></li>
<li><a href="#"><img src="../images/2.jpg"></a></li>
<li><a href="#"><img src="../images/2.jpg"></a></li>
<li><a href="#"><img src="../images/3.jpg"></a></li>
<li><a href="#"><img src="../images/3.jpg"></a></li>
<li><a href="#"><img src="../images/3.jpg"></a></li>
</ul>
</div>
<div id="item2" class="item">
<h2>2F 沙漠</h2>
<ul>
<li><a href="#"><img src="../images/4.jpg"></a></li>
<li><a href="#"><img src="../images/4.jpg"></a></li>
<li><a href="#"><img src="../images/4.jpg"></a></li>
<li><a href="#"><img src="../images/4.jpg"></a></li>
<li><a href="#"><img src="../images/4.jpg"></a></li>
<li><a href="#"><img src="../images/4.jpg"></a></li>
<li><a href="#"><img src="../images/4.jpg"></a></li>
<li><a href="#"><img src="../images/4.jpg"></a></li>
<li><a href="#"><img src="../images/4.jpg"></a></li>
</ul>
</div>
<div id="item3" class="item">
<h2>3F 灯塔</h2>
<ul>
<li><a href="#"><img src="../images/5.jpg"></a></li>
<li><a href="#"><img src="../images/5.jpg"></a></li>
<li><a href="#"><img src="../images/5.jpg"></a></li>
<li><a href="#"><img src="../images/5.jpg"></a></li>
<li><a href="#"><img src="../images/5.jpg"></a></li>
<li><a href="#"><img src="../images/5.jpg"></a></li>
<li><a href="#"><img src="../images/5.jpg"></a></li>
<li><a href="#"><img src="../images/5.jpg"></a></li>
<li><a href="#"><img src="../images/5.jpg"></a></li>
</ul>
</div>
<div id="item4" class="item">
<h2>4F 动物</h2>
<ul>
<li><a href="#"><img src="../images/6.jpg"></a></li>
<li><a href="#"><img src="../images/6.jpg"></a></li>
<li><a href="#"><img src="../images/6.jpg"></a></li>
<li><a href="#"><img src="../images/7.jpg"></a></li>
<li><a href="#"><img src="../images/7.jpg"></a></li>
<li><a href="#"><img src="../images/7.jpg"></a></li>
<li><a href="#"><img src="../images/8.jpg"></a></li>
<li><a href="#"><img src="../images/8.jpg"></a></li>
<li><a href="#"><img src="../images/8.jpg"></a></li>
</ul>
</div>
</div>
</body>
</html>
-
- 慕沐3390597
- 2016-11-13 21:16:37
都没看到你代码，不知道什么原因
网页定位导航特效
71404 学习 · 486 问题
相似问题