top打印发现一直等于0. 没有显示想要的效果-慕课网

top打印发现一直等于0. 没有显示想要的效果

来源：6-4 编程练习

Andrew_liu

2014-11-17 09:00

<!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: 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>
    
  //定义getByClassName函数，让函数实现根据class name获取对象并返回
    function addClass(obj,cls){
        if(!hasClass(obj,cls)){
           obj.className+=" "+cls;
        }
    }
    
	function hasClass( obj, cls ){ 
	    return obj.className.match(new RegExp("(\\s|^)" + cls + "(\\s|$)"));
	}
	
	function removeClass( obj, cls ){ 
	    if( hasClass( obj, cls )){ 
		    //remove
			var reg = new RegExp("(\\s|^)" + cls + "(\\s|$)");
			obj.className = obj.className.replace(reg, "");
		}
	}
	
	
    //定义getByClassName函数，让函数实现给对象增加class 
    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;
    }
	
	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;
				}			
			}
		
		 				
      //请补充此处代码，给正确的menu下的a元素class赋值current
      if(currentId){
		  for(var j=0;j<menus.length;j++){
			  var _menu=menus[j];
			  var _href=_menu.href.split("#");
			  if(_href[_href.length-1]!=currentId){
				  removeClass(_menu,"current");}
				  else{
					  addClass(_menu,"current");
					  }
				
			  }
		  }
      
	
		}	
	}	
</script>

top打印发现一直等于0. 没有显示想要的效果

写回答关注

1回答

Andrew_liu

2014-11-17 09:05:29

发现代码主要有两个问题,一个是top的兼容问题, var top = document.documentElement.scrollTop || document.body.scrollTop;就可以了, 另一个是最后调用addClass和removeClass分别是两个自定义函数,不能用点语法

0 0

网页定位导航特效

本课程讲解网页定位导航特效，仿天猫版地狗购物网，你值得拥有

71404 学习 · 486 问题

查看课程

相似问题

top和menus.length打印结果一直为0

回答 1

原生JavaScript中 top的值怎么都是0 没变化，真的有效果？？

回答 3

top为什么等于2000

回答 2

js源码效果运行不出来，关于top的值没有变化的问题。

回答 3

没有任何效果

回答 2

打开慕课网App查看更多内容