html底部返回顶部的置顶导航,利用滚动监听回到顶部的时候,吸附在顶端的导航栏会抖一下,请问是什么原因?...

Document

* {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呢?

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值