请问一下，我的这段JS怎么没有效果?

首页课程实战体系课手记专栏慕课教程

请问一下，我的这段JS怎么没有效果?

这段代码我已经对了两次了，还是没有对出来哪里错了，能否帮我看一下是哪里错了

<!DOCTYPE html>

<html>

<head>

<title>地狗购物网——网页定位导航效果</title>

<style>

* {

margin: 0;

padding: 0;

}

body{

font-size: 12px;

line-height: 1.7;

}

li{list-style-type: 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-color: #0088bb;}

/* 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>

/*$(document).ready(function() {

//滚动条发生滚动

$(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;

}

})

//给相应楼层的#，设置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);

});

});*/

//根据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)){

//remove

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.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop;

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

console.log(menu.length);

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) {

//给正确的menu下的a元素class赋值

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>

</head>

<body>

<ul>

</ul>

</div>

<h1>地狗购物网</h1>

<ul>

</ul>

</div>

<ul2

</ul>

</div>

<ul>

</ul>

</div>

<ul>

</ul>

</div>

<ul>

</ul>

</div>

</body>

</html>

未来99

浏览 1226回答 1

1回答

堂堂堂堂糖糖糖童鞋

修改一下两处即可：1、修改var top = document.documentElement ? document.documentElement.scrollTop : document.body.scrollTop;为var top = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop;原因是需要不断监测scrollTop值的变化，来为top 赋值。2、getByClassName(document.getElementById("content"), "item"); 需要一个 class为 "item" 的元素<div id="item1" class="item"></div> <div id="item2" class="item"></div> <div id="item3" class="item"></div> <div id="item4" class="item"></div> <div id="item5" class="item"></div>分别添加 class="item"即可

0 0

随时随地看视频慕课网APP