* {margin: 0;padding: 0;box-sizing: border-box;}
ul {list-style: none;width: 100%;height: 50px;background: #212121;padding-left: 100px;}
li {display: inline-block;line-height: 50px;width: 100px;text-align: center;background: #333;color: #FFF;cursor: pointer;}
p {height: 400px;width: 80%;background: #DDD;margin: 0 auto;border: 1px solid #000;}
.fix {position: fixed;top: 0;width: 100%;}
.cur {background: #FFF; color: #212121;}
- 1
- 2
- 3
1
2
3
function up() {
var nav = document.getElementById("nav")
var scroll = document.documentElement
var top = nav.offsetTop
var hei = nav.offsetHeight
var li = document.getElementsByTagName("li")
var p = document.getElementsByTagName("p")
window.onscroll = function() {
if (scroll.scrollTop >= top) {
nav.className = "fix"
}
if (scroll.scrollTop <= top) {
nav.className = ""
}
for (var i=0;i
if (scroll.scrollTop + hei >= p[i].offsetTop - top/1.1) {
for (var j=0;j
li[j].className = ""
}
li[i].className = "cur"
}
}
}
}
function move(){
var nav = document.getElementById("nav")
var scroll = document.documentElement
var hei = nav.offsetHeight
var li = document.getElementsByTagName("li")
var p = document.getElementsByTagName("p")
for (var i=0; i
var timer
li[i].index = i
li[i].onclick = function(){
var self = this
clearInterval(timer)
timer = setInterval(function(){
if (scroll.scrollTop + hei <= p[self.index].offsetTop) {
scroll.scrollTop += Math.ceil(p[self.index].offsetTop/10)
if (scroll.scrollTop + hei >= p[self.index].offsetTop) {
scroll.scrollTop = p[self.index].offsetTop - hei
clearInterval(timer)
}
} else {
scroll.scrollTop /= 1.1
if (scroll.scrollTop + hei <= p[self.index].offsetTop) {
scroll.scrollTop = p[self.index].offsetTop - hei
clearInterval(timer)
}
}
},20)
}
}
}
window.onload = function(){
up()
move()
}
点一下 3 到底部,然后点 1 返回顶部,吸附在顶端的导航栏会抖一下,看了好久不知道问题出在哪里,求教一下!
另外还想问一下关于这行代码
scroll.scrollTop /= 1.1
为什么要除以1.1呢?