滾動效果問題
照著老師講解那樣做了一遍，但是隨著滾動條的滾動右側到后來沒有隨著改變，是為什么
幕布斯3621227
2016-11-13
2 回答
舉報
0/150
提交
取消
2016-11-16
<!DOCTYPE HTML> ? ?
<html> ? ?
<head> ? ?
<meta charset="utf-8"> ? ?
<title>網(wǎng)頁定位導航特效</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() { ? ?
//滾動條發(fā)生滾動 ? ?
$(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> ? ?
2016-11-13
都沒看到你代碼，不知道什么原因