                        課程
                    
                        /前端開發(fā)
                        
                            /JavaScript
                        
                        /網(wǎng)頁定位導(dǎo)航特效

點’2樓‘，‘1樓’導(dǎo)航高亮。點‘3樓’，‘2樓’導(dǎo)航高亮。為啥呢？

<!DOCTYPE?html>
<html>
<head>
<meta?charset="utf-8"/>
<title>地狗購物網(wǎng)——網(wǎng)頁定位導(dǎo)航效果</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;
????????}

???????
/*請補充此處代碼，讓導(dǎo)航菜單在右側(cè)絕對定位顯示*/
????????#menu?{
????????????position?:fixed;
????????????top:100px;
????????????left:50%;
????????????margin-left:400px;
????????????width:80px;
????????}

????????#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:?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>
???????$(function(){
????????????//滾動條發(fā)生滾動時，要獲取相應(yīng)的值。
????????????$(window).scroll(function(){
????????????????//請補充此處代碼，讓導(dǎo)航菜單實現(xiàn)在滾動條滾動的時候自動設(shè)置焦點
????????????????var?top?=?$(document).scrollTop();??//var?menuTop?=?$menu.scrollTop();?<--錯誤的?$(document)為獲取整個文檔，發(fā)現(xiàn)，在該例子下‘document’等同于‘this’
????????????????var?$menu?=?$("#menu");
????????????????var?items?=?$("#content").find(".item");?//比$("#content?.item");效率高
????????????????var?menuTop?=?"";?//導(dǎo)航的相對位移
????????????????var?floor="";
????????????????items.each(function(){
????????????????????menuTop?=?$(this).offset().top;//item.offset();-->錯誤的?offset：獲取元素的top與left
????????????????????if(top>menuTop)
????????????????????{
????????????????????????floor?=?"#"+$(this).attr("id");
????????????????????}else{
????????????????????????return?false;
????????????????????}
????????????????????
????????????????});
????????????????
????????????????//給相應(yīng)樓層的a?設(shè)置?current，取消其他鏈接的current
????????????????var?currentLink?=?$("#menu").find(".current");
????????????????if(floor?&&?currentLink.attr("href")!=floor)
????????????????{
????????????????????currentLink.removeClass("current");
????????????????????$menu.find("[href="+floor+"]").addClass("current");//$("menu").find("[href="+floor+"]").addClass("current");
????????????????}
????????????});
???????});????
</script>
</head>
<body>
<div?id="menu">
<ul>
<!--運用錨點，實現(xiàn)導(dǎo)航定位。-->


<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?數(shù)碼</a></li>
<li><a?href="#item5">5F?母嬰</a></li>
</ul>
</div>
<div?id="content">
<h1>地狗購物網(wǎng)</h1>

<div?id="item1"?class="item">
<h2>1F?男裝</h2>
<ul>
<li><a?href="#"><img?src="http://img1.sycdn.imooc.com//53660fce0001111903990422.jpg"?alt=""/></a></li>
<li><a?href="#"><img?src="http://img1.sycdn.imooc.com//53660fce0001111903990422.jpg"?alt=""/></a></li>
<li><a?href="#"><img?src="http://img1.sycdn.imooc.com//53660fce0001111903990422.jpg"?alt=""/></a></li>
<li><a?href="#"><img?src="http://img1.sycdn.imooc.com//53660fce0001111903990422.jpg"?alt=""/></a></li>
<li><a?href="#"><img?src="http://img1.sycdn.imooc.com//53660fce0001111903990422.jpg"?alt=""/></a></li>
<li><a?href="#"><img?src="http://img1.sycdn.imooc.com//53660fce0001111903990422.jpg"?alt=""/></a></li>
<li><a?href="#"><img?src="http://img1.sycdn.imooc.com//53660fce0001111903990422.jpg"?alt=""/></a></li>
<li><a?href="#"><img?src="http://img1.sycdn.imooc.com//53660fce0001111903990422.jpg"?alt=""/></a></li>
<li><a?href="#"><img?src="http://img1.sycdn.imooc.com//53660fce0001111903990422.jpg"?alt=""/></a></li>
</ul>
</div>
<div?id="item2"?class="item">
<h2>2F?女裝</h2>
<ul>
<li><a?href="#"><img?src="http://img1.sycdn.imooc.com//5366104c0001e5c403990422.jpg"?alt=""/></a></li>
<li><a?href="#"><img?src="http://img1.sycdn.imooc.com//5366104c0001e5c403990422.jpg"?alt=""/></a></li>
<li><a?href="#"><img?src="http://img1.sycdn.imooc.com//5366104c0001e5c403990422.jpg"?alt=""/></a></li>
<li><a?href="#"><img?src="http://img1.sycdn.imooc.com//5366104c0001e5c403990422.jpg"?alt=""/></a></li>
<li><a?href="#"><img?src="http://img1.sycdn.imooc.com//5366104c0001e5c403990422.jpg"?alt=""/></a></li>
<li><a?href="#"><img?src="http://img1.sycdn.imooc.com//5366104c0001e5c403990422.jpg"?alt=""/></a></li>
<li><a?href="#"><img?src="http://img1.sycdn.imooc.com//5366104c0001e5c403990422.jpg"?alt=""/></a></li>
<li><a?href="#"><img?src="http://img1.sycdn.imooc.com//5366104c0001e5c403990422.jpg"?alt=""/></a></li>
<li><a?href="#"><img?src="http://img1.sycdn.imooc.com//5366104c0001e5c403990422.jpg"?alt=""/></a></li>
</ul>
</div>
<div?id="item3"?class="item">
<h2>3F?美妝</h2>
<ul>
<li><a?href="#"><img?src="http://img1.sycdn.imooc.com//536610820001cf5b03990422.jpg"?alt=""/></a></li>
<li><a?href="#"><img?src="http://img1.sycdn.imooc.com//536610820001cf5b03990422.jpg"?alt=""/></a></li>
<li><a?href="#"><img?src="http://img1.sycdn.imooc.com//536610820001cf5b03990422.jpg"?alt=""/></a></li>
<li><a?href="#"><img?src="http://img1.sycdn.imooc.com//536610820001cf5b03990422.jpg"?alt=""/></a></li>
<li><a?href="#"><img?src="http://img1.sycdn.imooc.com//536610820001cf5b03990422.jpg"?alt=""/></a></li>
<li><a?href="#"><img?src="http://img1.sycdn.imooc.com//536610820001cf5b03990422.jpg"?alt=""/></a></li>
<li><a?href="#"><img?src="http://img1.sycdn.imooc.com//536610820001cf5b03990422.jpg"?alt=""/></a></li>
<li><a?href="#"><img?src="http://img1.sycdn.imooc.com//536610820001cf5b03990422.jpg"?alt=""/></a></li>
<li><a?href="#"><img?src="http://img1.sycdn.imooc.com//536610820001cf5b03990422.jpg"?alt=""/></a></li>
</ul>
</div>
<div?id="item4"?class="item">
<h2>4F?數(shù)碼</h2>
<ul>
<li><a?href="#"><img?src="http://img1.sycdn.imooc.com//536610ac00012df703990422.jpg"?alt=""/></a></li>
<li><a?href="#"><img?src="http://img1.sycdn.imooc.com//536610ac00012df703990422.jpg"?alt=""/></a></li>
<li><a?href="#"><img?src="http://img1.sycdn.imooc.com//536610ac00012df703990422.jpg"?alt=""/></a></li>
<li><a?href="#"><img?src="http://img1.sycdn.imooc.com//536610ac00012df703990422.jpg"?alt=""/></a></li>
<li><a?href="#"><img?src="http://img1.sycdn.imooc.com//536610ac00012df703990422.jpg"?alt=""/></a></li>
<li><a?href="#"><img?src="http://img1.sycdn.imooc.com//536610ac00012df703990422.jpg"?alt=""/></a></li>
<li><a?href="#"><img?src="http://img1.sycdn.imooc.com//536610ac00012df703990422.jpg"?alt=""/></a></li>
<li><a?href="#"><img?src="http://img1.sycdn.imooc.com//536610ac00012df703990422.jpg"?alt=""/></a></li>
<li><a?href="#"><img?src="http://img1.sycdn.imooc.com//536610ac00012df703990422.jpg"?alt=""/></a></li>
</ul>
</div>
<div?id="item5"?class="item">
<h2>5F?母嬰</h2>
<ul>
<li><a?href="#"><img?src="http://img1.sycdn.imooc.com//536610cd0001f34603990422.jpg"?alt=""/></a></li>
<li><a?href="#"><img?src="http://img1.sycdn.imooc.com//536610cd0001f34603990422.jpg"?alt=""/></a></li>
<li><a?href="#"><img?src="http://img1.sycdn.imooc.com//536610cd0001f34603990422.jpg"?alt=""/></a></li>
<li><a?href="#"><img?src="http://img1.sycdn.imooc.com//536610cd0001f34603990422.jpg"?alt=""/></a></li>
<li><a?href="#"><img?src="http://img1.sycdn.imooc.com//536610cd0001f34603990422.jpg"?alt=""/></a></li>
<li><a?href="#"><img?src="http://img1.sycdn.imooc.com//536610cd0001f34603990422.jpg"?alt=""/></a></li>
<li><a?href="#"><img?src="http://img1.sycdn.imooc.com//536610cd0001f34603990422.jpg"?alt=""/></a></li>
<li><a?href="#"><img?src="http://img1.sycdn.imooc.com//536610cd0001f34603990422.jpg"?alt=""/></a></li>
<li><a?href="#"><img?src="http://img1.sycdn.imooc.com//536610cd0001f34603990422.jpg"?alt=""/></a></li>
</ul>
</div>
</div>
</body>
</html>

舉個栗子233

2015-09-09

源自：網(wǎng)頁定位導(dǎo)航特效 4-5

關(guān)注問題我要回答

1600

操作

收起

1 回答

舉個栗子233 提問者
2015-09-10

找到原因了：

????????????????????if(top>menuTop)
????????????????????{
????????????????????????floor?=?"#"+$(this).attr("id");
????????????????????}else{
????????????????????????return?false;
????????????????????}

if（）括號內(nèi)應(yīng)該改為（top>menuTop-200）