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

代碼照著老師講的看了幾遍也沒找到什么問題，為什么沒有出現(xiàn)滾動定樓層呢？求解大白一個，勿噴！

<!DOCTYPE html>

<html>

<head>

<title>地狗購物網(wǎng)——網(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;

? ? ? ? }

? ? ? ?

/*請補充此處代碼，讓導航菜單在右側(cè)絕對定位顯示*/

#menu{position:fixed;

left:50%;

top:100px;

margin-left:400px;}

? ? ? ??

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

? ? ? ?

? ? ? ? ? ? //滾動條發(fā)生滾動時，要獲取相應的值。

? ? ? ? ? ?

? ? ? ? ? $(document).ready(function(){

? ? ? ?// ?滾動條發(fā)生滾動

? ? ? ? ?$(window).scroll(function(){

? ? ? ? ? ? ?//在這里，我們做一些事情

? ? ? ? ? ? var top=$(document).scrollTop();

? ? ? ? ? ? ?var menu=$("#menu");

? ? ? ? ? ? ?var items=$("#current").find(".item");

? ? ? ? ? ? ?var currentId="";//當前所在的樓層（item）id

? ? ? ? ? ? ?items.each(function(){

? ? ? ? ? ? ? ? var m=$(this);

? ? ? ? ? ? ? ? ?var itemTop=m.offset().top;

? ? ? ? ? ? ? ? ?if(top>itemTop-200){

? ? ? ? ? ? ? ? ? currentId="#"+m.attr("id");

? ? ? ? ? ? ? ? ?} else{

? ? ? ? ? ? ? ? ? ? ? return false;

? ? ? ? ? ? ? ? ?}

? ? ? ? ? ? ?});

? ? ? ? ? ? ?//給相應的樓層的a設置current，取消其他鏈接的current

? ? ? ? ? ? ?var currentLink=menu.find(".current");

? ? ? ? ? ? ?if(currentId && currentLink.attr("href")!=currentId){

? ? ? ? ? ? ? ? ?currentLink.removeClass("current");

? ? ? ? ? ? ? ? ?menu.find("[href="+ currentId + "]").addClass("current")

? ? ? ? ? ? ?}

? ? ? ? ? ? // console.log(top)

? ? ? ? ?});

? ? ?});

? ? </script> ??

? ? ? ? ?

</script>

</head>

<body>

<ul>

</ul>

</div>

<h1>地狗購物網(wǎng)</h1>

<ul>

</ul>

</div>

<ul>

</ul>

</div>

<ul>

</ul>

</div>

<ul>

</ul>

</div>

<ul>

</ul>

</div>

</body>

</html>

慕粉3597558

2016-10-22

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

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

1279

操作

收起

5 回答

云彩無色3804005
2016-10-28

var items=$("#current").find(".item");? #current改成#content
2.錨點鏈接沒加
<li><a href="#" class="current">1F 男裝</a></li>。。。。
全部改成相應的href="#item1" href="#item2" href="#item3" href="#item4"? href="#item5"
3.?? </script> 多個去掉個
上面代碼測試過，問題解決，你試下，我也是今晚問題才解決

0 回復有任何疑惑可以回復我~

收起回答

云彩無色3804005
2016-10-28

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8"/>

<title>地狗購物網(wǎng)——網(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;

??????? }

????? ?

/*請補充此處代碼，讓導航菜單在右側(cè)絕對定位顯示*/

#menu{position:fixed;

left:50%;

top:100px;

margin-left:400px;}

?????? ?

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

????? ?

??????????? //滾動條發(fā)生滾動時，要獲取相應的值。

????????? ?

????????? $(document).ready(function(){

?????? //? 滾動條發(fā)生滾動

???????? $(window).scroll(function(){

???????????? //在這里，我們做一些事情

??????????? var top=$(document).scrollTop();

???????????? var menu=$("#menu");

???????????? var items=$("#content").find(".item");

???????????? var currentId="";//當前所在的樓層（item）id

???????????? items.each(function(){

??????????????? var m=$(this);

???????????????? var itemTop=m.offset().top;

???????????????? if(top>itemTop-200){

????????????????? currentId="#"+m.attr("id");

???????????????? } else{

????????????????????? return false;

???????????????? }

???????????? });

???????????? //給相應的樓層的a設置current，取消其他鏈接的current

???????????? var currentLink=menu.find(".current");

???????????? if(currentId && currentLink.attr("href")!=currentId){

???????????????? currentLink.removeClass("current");

???????????????? menu.find("[href="+ currentId + "]").addClass("current")

???????????? }

??????????? // console.log(top)

???????? });

???? });

??? </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 數(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>