当屏幕距离somecontent这个div,大于1000px是，给class为mac_jxyjnav 给加上一个ID #mac_jxyjnav的，如果向上滚动距离somecontent小于1000px时取消这个ID的，但是发现失效了，加ID名成功，取消ID名却失效了，如何解决?
<head>
<style type="text/css">
.somecontent {width: 1000px;height: 332px; margin: 0 auto; background-color: #ccc;}
.floor {width: 1000px; margin: 0 auto;height: 400px;background: yellowgreen;margin-bottom: 10px;}
.f1 {height: 433px;}
.f2 { height: 352px;}
.f3 { height: auto;display:block; }
.leftNav {position: fixed;bottom: 110px;left: 10px; width: 60px;}
.leftNav ul {list-style: none;}
.leftNav ul li { width: 60px; height: 60px;background-color: #ccc;}
.leftNav ul li a {display: block; width: 60px;height: 60px;line-height: 60px;text-align: center; text-decoration: none;font-size: 14px; }
.leftNav ul li a.number {display: block;}
.leftNav ul li a.chinese {display: none;color: white;}
.leftNav ul li.cur a.number { display: none;}
.leftNav ul li.cur a.chinese { display: block;}
.leftNav ul li.cur { background-color: rgb(111, 0, 0); }
</style>
</head>
<body>
<div class="somecontent"></div>
<div class="leftNav" id="leftNav">
<ul>
<li>
<a href="javascript:;" class="number">1F</a>
<a href="javascript:;" class="chinese">百货</a>
</li>
<li>
<a href="javascript:;" class="number">2F</a>
<a href="javascript:;" class="chinese">男装</a>
</li>
<li class="mac_jxyjnav">
<a href="javascript:;" class="number">3F</a>
<a href="javascript:;" class="chinese">女装</a>
</li>
<li>
<a href="javascript:;" class="number">4F</a>
<a href="javascript:;" class="chinese">裤子</a>
</li>
<li>
<a href="javascript:;" class="number">5F</a>
<a href="javascript:;" class="chinese">童装</a>
</li>
<li>
<a href="javascript:;" class="number">6F</a>
<a href="javascript:;" class="chinese">运动</a>
</li>
<li>
<a href="javascript:;" class="number">7F</a>
<a href="javascript:;" class="chinese">电子</a>
</li>
</ul>
</div>
<div class="floor f2"> </div>
<div class="floor f3">
<div style="display:block;width:100%;height:1900px;"></div>
<div style="clear:both;"></div>
</div>
<div class="floor f4"></div>
<div class="floor f5"></div>
<div class="floor f6">
</div>
<div class="floor f7"></div>
<div class="somecontent"></div>
<script type="text/javascript">
//添加滚动事件
window.addEventListener("scroll",function(e){
var t =document.documentElement.scrollTop||document.body.scrollTop;
console.log(t)
if(t > 1000 ){
//超过2400加上Id
if(document.getElementsByClassName("mac_jxyjnav")[0].id==""){
document.getElementsByClassName("mac_jxyjnav")[0].setAttribute("id","mac_jxyjnav")
}
}else{
//小于2400去掉ID
if(document.getElementsByClassName("mac_jxyjnav")[0].id!=""){
document.getElementsByClassName("mac_jxyjnav")[0].removeAttribute("id")
}
}
});
</script>
<script>
// 获取DOM元素
var leftBtnList = document.getElementById('leftNav').getElementsByTagName('li');
// 声明楼层数组，楼层高度数组
var floorArr = [];
var floorOffsetTopArr = [];
// 将所有楼层与楼层高度添加进数组
for (var i = 0; i < document.body.childNodes.length; i++) {
if (document.body.childNodes[i].nodeType == '1' && document.body.childNodes[i].className.indexOf('floor') != -1) {
floorArr.push(document.body.childNodes[i]);
floorOffsetTopArr.push(document.body.childNodes[i].offsetTop);
}
}
// 声明当前楼层,初始没有进入任何楼层
var nowFlool = NaN;
// 数组超标给楼层高度数组添加一个假楼层高度
floorOffsetTopArr.push(floorOffsetTopArr[floorOffsetTopArr.length - 1] + floorArr[floorArr.length - 1].clientHeight);
// 添加滚动监听
window.onscroll = function() {
// 获取当前卷去位置
var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
// 判读是否进入当前楼层
for (var i = 0; i < floorOffsetTopArr.length; i++) {
if (scrollTop >= floorOffsetTopArr[i] - 200 && scrollTop < floorOffsetTopArr[i + 1] - 200) {
// 如果在当前楼层不执行DOM操作
if (nowFlool != i) {
// 如果是原楼层不存在则不执行DOM操作
!isNaN(nowFlool) && (leftBtnList[nowFlool].className = "");
nowFlool = i;
// 当前楼层添加
leftBtnList[nowFlool].className = "cur";
}
// 如果进入楼层就退出，如果没有退出就是没有在任何楼层
break;
}
}
console.log(i);
// 不在任何楼层 i == floorOffsetTopArr.length
if (i == floorOffsetTopArr.length) {
!isNaN(nowFlool) && (leftBtnList[nowFlool].className = "");
nowFlool = NaN;
}
}
// 给按钮添加监听
for (var i = 0; i < leftBtnList.length; i++) {
leftBtnList[i].index = i;
leftBtnList[i].onclick = function() {
scrollAnimate(floorOffsetTopArr[this.index], 600)
}
}
// 定义滚动动画
function scrollAnimate(target, time) {
var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
// 定义动画间隔
var interval = 10;
// 获取总帧率
var allFrame = time / interval;
// 获取总距离
var distance = target - scrollTop;
// 定义当前帧率
var currentFrame = 0;
// 定时器
var timer = setInterval(function() {
// 设置卷曲值
document.body.scrollTop = document.documentElement.scrollTop = Liear(currentFrame, scrollTop, distance, allFrame);
currentFrame++;
if (currentFrame == allFrame) {
clearInterval(timer)
}
}, interval)
}
// 随便定义一个缓动公式
function Liear(t, b, c, d) {
return t * c / d + b;
}
</script>
</body>
</html>
因为你在滚动页面的时候会把class清空或者赋值为cur，下次再找mac_jxyjnav就找不到了，所以会操作失败并报错。
你可以在滚动的时候判断一下是不是有mac_jxyjnav再修改，代码如下，改动的地方在监听滚动事件内：
<html>
<head>
<style type="text/css">
.somecontent {
width: 1000px;
height: 332px;
margin: 0 auto;
background-color: #ccc;
}
.floor {
width: 1000px;
margin: 0 auto;
height: 400px;
background: yellowgreen;
margin-bottom: 10px;
}
.f1 {
height: 433px;
}
.f2 {
height: 352px;
}
.f3 {
height: auto;
display: block;
}
.leftNav {
position: fixed;
bottom: 110px;
left: 10px;
width: 60px;
}
.leftNav ul {
list-style: none;
}
.leftNav ul li {
width: 60px;
height: 60px;
background-color: #ccc;
}
.leftNav ul li a {
display: block;
width: 60px;
height: 60px;
line-height: 60px;
text-align: center;
text-decoration: none;
font-size: 14px;
}
.leftNav ul li a.number {
display: block;
}
.leftNav ul li a.chinese {
display: none;
color: white;
}
.leftNav ul li.cur a.number {
display: none;
}
.leftNav ul li.cur a.chinese {
display: block;
}
.leftNav ul li.cur {
background-color: rgb(111, 0, 0);
}
</style>
</head>
<body>
<div class="somecontent"></div>
<div class="leftNav" id="leftNav">
<ul>
<li>
<a href="javascript:;" class="number">1F</a>
<a href="javascript:;" class="chinese">百货</a>
</li>
<li>
<a href="javascript:;" class="number">2F</a>
<a href="javascript:;" class="chinese">男装</a>
</li>
<li class="mac_jxyjnav">
<a href="javascript:;" class="number">3F</a>
<a href="javascript:;" class="chinese">女装</a>
</li>
<li>
<a href="javascript:;" class="number">4F</a>
<a href="javascript:;" class="chinese">裤子</a>
</li>
<li>
<a href="javascript:;" class="number">5F</a>
<a href="javascript:;" class="chinese">童装</a>
</li>
<li>
<a href="javascript:;" class="number">6F</a>
<a href="javascript:;" class="chinese">运动</a>
</li>
<li>
<a href="javascript:;" class="number">7F</a>
<a href="javascript:;" class="chinese">电子</a>
</li>
</ul>
</div>
<div class="floor f2"> </div>
<div class="floor f3">
<div style="display:block;width:100%;height:1900px;"></div>
<div style="clear:both;"></div>
</div>
<div class="floor f4"></div>
<div class="floor f5"></div>
<div class="floor f6">
</div>
<div class="floor f7"></div>
<div class="somecontent"></div>
<script type="text/javascript">
//添加滚动事件
window.addEventListener("scroll", function(e) {
var t = document.documentElement.scrollTop || document.body.scrollTop;
console.log(t)
if (t > 1000) {
//超过2400加上Id
if (document.getElementsByClassName("mac_jxyjnav")[0].id == "") {
document.getElementsByClassName("mac_jxyjnav")[0].setAttribute("id", "mac_jxyjnav")
}
} else {
//小于2400去掉ID
if (document.getElementsByClassName("mac_jxyjnav")[0].id != "") {
document.getElementsByClassName("mac_jxyjnav")[0].removeAttribute("id")
}
}
});
</script>
<script>
// 获取DOM元素
var leftBtnList = document.getElementById('leftNav').getElementsByTagName('li');
// 声明楼层数组，楼层高度数组
var floorArr = [];
var floorOffsetTopArr = [];
// 将所有楼层与楼层高度添加进数组
for (var i = 0; i < document.body.childNodes.length; i++) {
if (document.body.childNodes[i].nodeType == '1' && document.body.childNodes[i].className.indexOf('floor') != -1) {
floorArr.push(document.body.childNodes[i]);
floorOffsetTopArr.push(document.body.childNodes[i].offsetTop);
}
}
// 声明当前楼层,初始没有进入任何楼层
var nowFlool = NaN;
// 数组超标给楼层高度数组添加一个假楼层高度
floorOffsetTopArr.push(floorOffsetTopArr[floorOffsetTopArr.length - 1] + floorArr[floorArr.length - 1].clientHeight);
// 添加滚动监听
window.onscroll = function() {
// 获取当前卷去位置
var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
// 判读是否进入当前楼层
for (var i = 0; i < floorOffsetTopArr.length; i++) {
if (scrollTop >= floorOffsetTopArr[i] - 200 && scrollTop < floorOffsetTopArr[i + 1] - 200) {
// 如果在当前楼层不执行DOM操作
if (nowFlool != i) {
// 如果是原楼层不存在则不执行DOM操作
!isNaN(nowFlool) && (leftBtnList[nowFlool].className = leftBtnList[nowFlool].className.indexOf("mac_jxyjnav")>-1?"mac_jxyjnav":"");
nowFlool = i;
// 当前楼层添加
leftBtnList[nowFlool].className = leftBtnList[nowFlool].className.indexOf("mac_jxyjnav")>-1?"cur mac_jxyjnav":"cur";
}
// 如果进入楼层就退出，如果没有退出就是没有在任何楼层
break;
}
}
console.log(i);
// 不在任何楼层 i == floorOffsetTopArr.length
if (i == floorOffsetTopArr.length) {
!isNaN(nowFlool) && (leftBtnList[nowFlool].className = leftBtnList[nowFlool].className.indexOf("mac_jxyjnav")>-1?"mac_jxyjnav":"");
nowFlool = NaN;
}
}
// 给按钮添加监听
for (var i = 0; i < leftBtnList.length; i++) {
leftBtnList[i].index = i;
leftBtnList[i].onclick = function() {
scrollAnimate(floorOffsetTopArr[this.index], 600)
}
}
// 定义滚动动画
function scrollAnimate(target, time) {
var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
// 定义动画间隔
var interval = 10;
// 获取总帧率
var allFrame = time / interval;
// 获取总距离
var distance = target - scrollTop;
// 定义当前帧率
var currentFrame = 0;
// 定时器
var timer = setInterval(function() {
// 设置卷曲值
document.body.scrollTop = document.documentElement.scrollTop = Liear(currentFrame, scrollTop, distance, allFrame);
currentFrame++;
if (currentFrame == allFrame) {
clearInterval(timer)
}
}, interval)
}
// 随便定义一个缓动公式
function Liear(t, b, c, d) {
return t * c / d + b;
}
</script>
</body>
</html>
用你代码跑不是正常的吗