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

為什么不對(duì)？檢查半天沒(méi)找到哪里有問(wèn)題

<!doctype html>

<html>

<head>

? ? <meta charset="UTF-8">

? ? <title>地狗購(gòu)物網(wǎng)-網(wǎng)頁(yè)定位導(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;

? ? ? ? }

? ? ? ? #menu {

? ? ? ? ? ? position: fixed;

? ? ? ? ? ? top: 100px;

? ? ? ? ? ? left: 50%;

? ? ? ? ? ? margin-left: 400px;

? ? ? ? ? ? width: 50px;

? ? ? ? }

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

? ? ? ? ? ? bottom: auto;

? ? ? ? ? ? top: expression(100+((e=document.documentElement.scrollTop)?e:document.body.scrollTop)+'px');

? ? ? ? }

? ? </style>

? ??

? ? <script type="text/javascript">

? ? //根據(jù)classname獲取元素

? ? ? ? function getByClassName(obj,cls){

? ? ? ? ? ? var elements=obj.getElementsByTagName("*");

? ? ? ? ? ? var result=[];

? ? ? ? ? ? for (var i = 0; i < elements.length; i++) {

? ? ? ? ? ? ? ? if(elements[i].className==cls){

? ? ? ? ? ? ? ? ? ? result.push(elements[i]);

? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? ? return result;?

? ? ? ? ? ? }

? ? ? ? }

? ? ? ? function hasClass(obj,cls){

? ? ? ? ? ? return obj.className.match(new RegExp("(\\s|^)"+cls+"(\\s|$)"));

? ? ? ? }

? ? ? ? function removeClass(obj,cls){

? ? ? ? ? ? if(hasClass(obj,cls)){

? ? ? ? ? ? ? ? var reg=new RegExp("(\\s|^)"+cls+"(\\s|$)");

? ? ? ? ? ? ? ? obj.className=obj.className.replace(reg,"");

? ? ? ? ? ? }

? ? ? ? }

? ? ? ? function addClass(obj,cls){

? ? ? ? ? ? if(!hasClass(obj,cls)){

? ? ? ? ? ? ? ? obj.className+=""+cls;

? ? ? ? ? ? }

? ? ? ? }

? ? ? ? window.onload=function(){

? ? ? ? ? ? window.onscroll=function(){

? ? ? ? ? ? ? ? var top=document.documentElement?document.documentElement.scrollTop:document.body.scrollTop;

? ? ? ? ? ? ? ? var menus=document.getElementById("menu").getElementsByTagName("a");

? ? ? ? ? ? ? ? var items=getByClassName(document.getElementById('content'),"item");

? ? ? ? ? ? ? ? var currentId="";

? ? ? ? ? ? ? ? for (var i = 0; i < items.length; i++) {

? ? ? ? ? ? ? ? ? ? var _item=item[i];

? ? ? ? ? ? ? ? ? ? var _itemtop=item.offsetTop;

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

? ? ? ? ? ? ? ? ? ? ? ? currentId=_item.id;

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

? ? ? ? ? ? ? ? ? ? ? ? break;

? ? ? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? ? if(currentId){

? ? ? ? ? ? ? ? ? ? //給正確的a元素加上class

? ? ? ? ? ? ? ? ? ? for (var i = 0; i < menus.length; i++) {

? ? ? ? ? ? ? ? ? ? ? ? var _menu=menus[i];

? ? ? ? ? ? ? ? ? ? ? ? var _href=_menu.href.split("#");

? ? ? ? ? ? ? ? ? ? ? ? if(_href[_href.length-1]!=currentId){

? ? ? ? ? ? ? ? ? ? ? ? ? ? removeClass(_menu,"current");

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

? ? ? ? ? ? ? ? ? ? ? ? ? ? addClass(_menu,"current");

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

? ? ? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? ? }

? ? ? ? ? ? }

? ? ? ? }

? ? </script>

</head>

<body>

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

? ? <h1>地狗購(gòu)物網(wǎng)</h1>

? ? <div id="item1" class="item">

? ? ? ? <h2>1F 男裝</h2>

? ? ? ? <ul>

? ? ? ? ? ? <li><a href="#"><img src="1F.jpg" alt=""/></a></li>

? ? ? ? </ul>

? ? </div>

? ? <div id="item2" class="item">

? ? ? ? <h2>2F 女裝</h2>

? ? ? ? <ul>

? ? ? ? ? ? <li><a href="#"><img src="2F.jpg" alt=""/></a></li>

? ? ? ? </ul>

? ? </div>

? ? <div id="item3" class="item">

? ? ? ? <h2>3F 美妝</h2>

? ? ? ? <ul>

? ? ? ? ? ? <li><a href="#"><img src="3F.jpg" alt=""/></a></li>

? ? ? ? </ul>

? ? </div>

? ? <div id="item4" class="item">

? ? ? ? <h2>4F 數(shù)碼</h2>

? ? ? ? <ul>

? ? ? ? ? ? <li><a href="#"><img src="4F.png" alt=""/></a></li>

? ? ? ? </ul>

? ? </div>

? ? <div id="item5" class="item">

? ? ? ? <h2>5F 母嬰</h2>

? ? ? ? <ul>

? ? ? ? ? ? <li><a href="#"><img src="5F.jpg" alt=""/></a></li>

? ? ? ? </ul>

? ? </div>

</div>

</body>

</html>

請(qǐng)叫我橙子蛋

2016-04-22

源自：網(wǎng)頁(yè)定位導(dǎo)航特效 6-3

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

1200

操作

收起

4 回答

零基礎(chǔ)1
2016-06-08

<!DOCTYPE html>

<html>

<head>

<style>

* {

? ? ? ? ? ? margin: 0;

? ? ? ? ? ? padding: 0;

? ? ? ? }

? ? ?body{

? ? ? padding:0;

? ? ? margin:0;

? ? ?}

? ? ?.wapper{

? ? ? width:800px;

? ? ? margin:0 auto;

? ? ? padding:20px;

? ? ?}

? ? ?h1{

? ? ? color:black;

? ? ? font-weight: bold;

? ? ? font-size: 24px;

? ? ?}

? ? ?h2{

? ? ? color:black;

? ? ? font-weight: bold;

? ? ? font-size: 18px;

? ? ?}

? ? ?.item{

? ? ? border: 1px dotted #0088bb;

? ? ? padding:10px;

? ? ? margin-bottom: 20px;

? ? ?}

? ? ?.item li{

? ? ? display: inline;

? ? ? list-style: none;

? ? ? margin:20px 0 20px 20px;

? ? ?

? ? ?}

? ? ?img{

? ? ? width:230px;

? ? ? height:230px;

? ? ?}

? ? ?hr{

? ? ? border:2px solid blue;

? ? ? margin-bottom: 10px;

? ? ?}

? ? ?h1,h2{

? ? ? margin-top: 10px;

? ? ? margin-bottom: 10px;

? ? ?

? ? ?}

? ?

? ? ?#nav ul li{

? ? ? list-style: none;

? ? ?}

? ? ?#nav ul li a{

? ? ? text-decoration: none;

? ? ? font-size: 16px;

? ? ? font-weight: bold;

? ? ? color:black;

? ? ? display: block;

? ? ? ? ?text-align: center;

? ? ? ? ?width:60px;

? ? ? ? ?height:40px;

? ? ? ? ?line-height: 40px;

? ? ? ? ?padding:3px;

? ? ?}

? ? ?#nav{

? ? ? ? ?position: fixed;

? ? ? ? ? ? top: 100px;

? ? ? ? ? ? left: 50%;

? ? ? ? ? ? margin-left: 400px;

? ? ? ? ? ?}

? #nav ul li a:hover,

? #nav ul li a.current{

? ? ? ? ?color: #fff;

? ? ? ? ? ? background: #0088bb;

? }

</style>

</head>

<body>

? ? ? ?<div id="content">

? ? ? ? <h1>天貓購(gòu)物網(wǎng)</h1>

? ? ? ? <div class="item" id="item1">

? ? ? ? <h2>1F男裝</h2>

? ? ? ? <hr/>

? ? ? ? ? <ul>

? ? ? ? ? ? ?<li><a href="#"><img src="1F.jpg" alt="第一層"></a></li>

? ? ? ? ? </ul>

? ? ? ? ?</div>

? ? ? ? ?<div class="item" id="item2">

? ? ? ? ? <h2>2F女裝</h2>

? ? ? ? <hr/>

? ? ? ? ? <ul>

? ? ? ? ? ? ?<li><a href="#"><img src="2F.jpg" alt="第一層"></a></li>

? ? ? ? ? </ul>

? ? ? ? ?</div>

? ? ? ? ?<div class="item" id="item3">

? ? ? ? ? <h2>3F彩妝</h2>

? ? ? ? <hr/>

? ? ? ? ? <ul>

? ? ? ? ? ? ?<li><a href="#"><img src="3F.jpg" alt="第一層"></a></li>

? ? ? ? ? </ul>

? ? ? ? ?</div>

? ? ? ? ?<div class="item" id="item4">

? ? ? ? ? <h2>4F數(shù)碼</h2>

? ? ? ? <hr/>

? ? ? ? ? <ul>

? ? ? ? ? ? ?<li><a herf="#"><img src="4F.png" alt="第一層"></a></li>

? ? ? ? ? </ul>

? ? ? ? ?</div>

? ? ? ? ?<div class="item" id="item5">

? ? ? ? ? <h2>5F母嬰</h2>

? ? ? ? <hr/>

? ? ? ? ? <ul>

? ? ? ? ? ? ?<li><a href="#"><img src="5F.jpg" alt="第一層"></a></li>

? ? ? ? ? </ul>

? ? ? ? ?</div>

? ? ? ?</div>

? ? ? ?<div id="nav">

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

? ? ?function getByclass(obj,cla){

? ? ? ?var result=[];

? ? ? ?var names=obj.getElementsByTagName("*");

? ? ? ?for(var i=0;i<names.length;i++){

? ? ? ? ? if (names[i].className==cla){

? ? ? ? ? ? ? result.push(names[i]);

? ? ? ? ? ?}

? ? ? }

? ? ? ?return result;

? ? ?};

? ? ?function hasClass(obj,cla){

? ? ? return obj.className.match(new RegExp("(\\s|^)"+cla+"(\\s|$)"));

? ? ?};

? ? ?function removeClass(obj,cla){

? ? ? if(hasClass(obj,cla)){

? ? ? var reg=new RegExp("(\\s|^)"+cla+"(\\s|$)");

? ? ? obj.className=obj.className.replace(reg,"");

? ? ? }

? ? ?};

? ? ?function addClass(obj,cla){

? ? ? if(!hasClass(obj,cla)){

? ? ? obj.className+= " "+cla;

? ? ? }

? ? ?}

? ? ? window.onload=function(){

? ? ? ? window.onscroll=function(){

? ? ? ? var top=document.documentElement.scrollTop?document.documentElement.scrollTop:document.body.scrollTop;

? ? ? ? var navs=document.getElementById("nav").getElementsByTagName("a");

? ? ? ? var items=getByclass(document.getElementById("content"),"item");

? ? ? ??

? ? ? ? //獲取當(dāng)前樓層的id

? ? ? ? var currentId="";

? ? ? ? for(var i=0;i<items.length;i++){

? ? ? ? ? ? ? var _item=items[i];

? ? ? ? ? ? ? var _top=_item.offsetTop;

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

? ? ? ? ? ? ? currentId=_item.id;

? ? ? ? ? ? ? ??

? ? ? ? ? ? ? }else{

? ? ? ? ? ? ? ? ?break;

? ? ? ? ? ? ? }

? ? ? ? }

? ? ? ? ? ?//為目標(biāo)樓層的nav添加current類

? ? ? ? if(currentId){

? ? ? ? ? ? ? ?for(var j=0;j<navs.length;j++){

? ? ? ? ? ? ? ? ?var _nav=navs[j];

? ? ? ? ? ? ? ? ?var _href=_nav.href.split("#");

? ? ? ? ? ? ? ? ?if(_href[_href.length-1]!=currentId){

? ? ? ? ? ? ? ? ? ? ? removeClass(_nav,"current");

? ? ? ? ? ? ? ? ? ? ?//_nav.className=""; ?不調(diào)用這兩個(gè)函數(shù)，直接賦值也可以實(shí)現(xiàn)該功能

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

? ? ? ? ? ? ? ? ? addClass(_nav,"current");

? ? ? ? ? ? ? ? ? // _nav.className="current";

? ? ? ? ? ? ? ? ?}

? ? ? ? ? ? ? ?}

? ? ? ? }

? ? ? }

? ? ?}

</script>

</body>

</html>

0 回復(fù) 有任何疑惑可以回復(fù)我~

收起回答

亞特蘭大
2016-04-22

哦，還有一個(gè)我最先改的，忘了說(shuō)，

var top=document.documentElement?document.documentElement.scrollTop:document.body.scrollTop;

改成var top=document.documentElement。scrollTop?document.documentElement.scrollTop:document.body.scrollTop;

你再試下。。。

1 回復(fù) 有任何疑惑可以回復(fù)我~

收起回答

#1

亞特蘭大

不是句號(hào)，是點(diǎn)，“.”，，，手癌。。。

2016-04-22 回復(fù) 有任何疑惑可以回復(fù)我~

請(qǐng)叫我橙子蛋提問(wèn)者
2016-04-22

<!doctype html>

<html>

<head>

? ? <meta charset="UTF-8">

? ? <title>地狗購(gòu)物網(wǎng)-網(wǎng)頁(yè)定位導(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;

? ? ? ? }

? ? ? ? #menu {

? ? ? ? ? ? position: fixed;

? ? ? ? ? ? top: 100px;

? ? ? ? ? ? left: 50%;

? ? ? ? ? ? margin-left: 400px;

? ? ? ? ? ? width: 50px;

? ? ? ? }

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

? ? ? ? ? ? bottom: auto;

? ? ? ? ? ? top: expression(100+((e=document.documentElement.scrollTop)?e:document.body.scrollTop)+'px');

? ? ? ? }

? ? </style>

? ??

? ? <script type="text/javascript">

? ? //根據(jù)classname獲取元素

? ? ? ? function getByClassName(obj,cls){

? ? ? ? ? ? var elements=obj.getElementsByTagName("*");

? ? ? ? ? ? var result=[];

? ? ? ? ? ? for (var i = 0; i < elements.length; i++) {

? ? ? ? ? ? ? ? if(elements[i].className==cls){

? ? ? ? ? ? ? ? ? ? result.push(elements[i]);

? ? ? ? ? ? ? ? }

? ? ? ? ? ? }

? ? ? ? ? ? return result;?

? ? ? ? ? ??

? ? ? ? }

? ? ? ? function hasClass(obj,cls){

? ? ? ? ? ? return obj.className.match(new RegExp("(\\s|^)"+cls+"(\\s|$)"));

? ? ? ? }

? ? ? ? function removeClass(obj,cls){

? ? ? ? ? ? if(hasClass(obj,cls)){

? ? ? ? ? ? ? ? var reg=new RegExp("(\\s|^)"+cls+"(\\s|$)");

? ? ? ? ? ? ? ? obj.className=obj.className.replace(reg,"");

? ? ? ? ? ? }

? ? ? ? }

? ? ? ? function addClass(obj,cls){

? ? ? ? ? ? if(!hasClass(obj,cls)){

? ? ? ? ? ? ? ? obj.className+=""+cls;

? ? ? ? ? ? }

? ? ? ? }

? ? ? ? window.onload=function(){

? ? ? ? ? ? window.onscroll=function(){

? ? ? ? ? ? ? ? var top=document.documentElement?document.documentElement.scrollTop:document.body.scrollTop;

? ? ? ? ? ? ? ? var menus=document.getElementById("menu").getElementsByTagName("a");

? ? ? ? ? ? ? ? var items=getByClassName(document.getElementById('content'),"item");

? ? ? ? ? ? ? ? var currentId="";

? ? ? ? ? ? ? ? for (var i = 0; i < items.length; i++) {

? ? ? ? ? ? ? ? ? ? var _item=items[i];

? ? ? ? ? ? ? ? ? ? var _itemtop=_item.offsetTop;

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

? ? ? ? ? ? ? ? ? ? ? ? currentId=_item.id;

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

? ? ? ? ? ? ? ? ? ? ? ? break;

? ? ? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? ? if(currentId){

? ? ? ? ? ? ? ? ? ? //給正確的a元素加上class

? ? ? ? ? ? ? ? ? ? for (var i = 0; i < menus.length; i++) {

? ? ? ? ? ? ? ? ? ? ? ? var _menu=menus[i];

? ? ? ? ? ? ? ? ? ? ? ? var _href=_menu.href.split("#");

? ? ? ? ? ? ? ? ? ? ? ? if(_href[_href.length-1]!=currentId){

? ? ? ? ? ? ? ? ? ? ? ? ? ? removeClass(_menu,"current");

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

? ? ? ? ? ? ? ? ? ? ? ? ? ? addClass(_menu,"current");

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

? ? ? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? ? }

? ? ? ? ? ? }

? ? ? ? }

? ? </script>

</head>

<body>

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

? ? <h1>地狗購(gòu)物網(wǎng)</h1>

? ? <div id="item1" class="item">

? ? ? ? <h2>1F 男裝</h2>

? ? ? ? <ul>

? ? ? ? ? ? <li><a href="#"><img src="1F.jpg" alt=""/></a></li>

? ? ? ? </ul>

? ? </div>

? ? <div id="item2" class="item">

? ? ? ? <h2>2F 女裝</h2>

? ? ? ? <ul>

? ? ? ? ? ? <li><a href="#"><img src="2F.jpg" alt=""/></a></li>

? ? ? ? </ul>

? ? </div>

? ? <div id="item3" class="item">

? ? ? ? <h2>3F 美妝</h2>

? ? ? ? <ul>

? ? ? ? ? ? <li><a href="#"><img src="3F.jpg" alt=""/></a></li>

? ? ? ? </ul>

? ? </div>

? ? <div id="item4" class="item">

? ? ? ? <h2>4F 數(shù)碼</h2>

? ? ? ? <ul>

? ? ? ? ? ? <li><a href="#"><img src="4F.png" alt=""/></a></li>

? ? ? ? </ul>

? ? </div>

? ? <div id="item5" class="item">

? ? ? ? <h2>5F 母嬰</h2>

? ? ? ? <ul>

? ? ? ? ? ? <li><a href="#"><img src="5F.jpg" alt=""/></a></li>

? ? ? ? </ul>

? ? </div>

</div>

</body>

</html>

0 回復(fù) 有任何疑惑可以回復(fù)我~

收起回答

亞特蘭大
2016-04-22

根據(jù)classname獲取元素函數(shù) 中，return false;要寫(xiě)在for循環(huán)外面才能得到完整的結(jié)果。
這部分代碼
? ? ? ? ? ? ? ? for (var i = 0; i < items.length; i++) {
? ? ? ? ? ? ? ? ? ? var _item=item[i];? // var _item = items[i];
?? ? ? ? ? ? ? ? ? var _itemtop=item.offsetTop;? //var _itemtop = _item.offsetTop;
? ? ? ? ? ? ? ? ? ? if(top>_itemtop-200){
? ? ? ? ? ? ? ? ? ? ? ? currentId=_item.id;
? ? ? ? ? ? ? ? ? ? }else{
? ? ? ? ? ? ? ? ? ? ? ? break;
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? }