利用滚动监听回到顶部的时候，吸附在顶端的导航栏会抖一下，请问是什么原因？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style>
    * {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;}
</style>
<body>
    <div style="height: 200px;"></div>
    <nav id="nav">
        <ul>
            <li class="cur">1</li><!--
         --><li>2</li><!--
         --><li>3</li>
        </ul>
    </nav>
    <div>
        <p>1</p>
        <p>2</p>
        <p>3</p>
    </div>
    <div style="height:500px;"></div>
</body>
<script>

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<li.length;i++) {
            if (scroll.scrollTop + hei >= p[i].offsetTop - top/1.1) {
                for (var j=0;j<li.length;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<li.length; 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()
}
</script>
</html>

点一下 3 到底部，然后点 1 返回顶部，吸附在顶端的导航栏会抖一下，看了好久不知道问题出在哪里，求教一下！
另外还想问一下关于这行代码

scroll.scrollTop /= 1.1

为什么要除以1.1呢？

css html javascript

阅读 3.5k

2 个回答

习泽涛

✓ 已被采纳

问题解决了
原因是navbar回到顶部的时候监听的是第一个P的offsetTop，顶部空间不足就把navbar给挤下去了。
改成监听navbar自己的offsetTop,然后回到顶部时，让P给出navbar.offsetHeight的空间就解决了。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style>
    *{margin: 0;padding: 0;}
    #nav {width: 100%;height: 50px;list-style: none;background: #212121;padding-left: 10%;}
    #nav li {display: inline-block;width: 100px;height: 100%;background: #333;color: #FFF;text-align: center;line-height: 50px;}
    #nav .cur {background: #BBB;color: #000;}

    p {height: 400px;border: 1px solid #000;background: #DDD;width: 80%;margin: 0 auto;}
    .fixed {position: fixed;top: 0;left: 0;}
</style>
<body>
    <div style="height:300px;"></div>
    <ul id="nav" class="">
        <li class="cur">1</li><!--
     --><li>2</li><!--
     --><li>3</li>
    </ul>
    <div id="div">
        <p>1</p>
        <p>2</p>
        <p>3</p>
    </div>
    <div style="height:500px;"></div>
</body>
<script>
    var navbar = document.getElementById("nav")
    var p = document.getElementsByTagName("p")
    var li = document.getElementsByTagName("li")
    var div = document.getElementById("div")
    var navH = navbar.offsetHeight
    var pH = navbar.offsetTop // 本来取的是第一个P的offsetTop
    window.onscroll = function() {
        var scrollTop = document.documentElement.scrollTop
        if (scrollTop >= pH ) {
            navbar.className = "fixed"
            div.style.paddingTop = navH + "px"
        } else {
            navbar.className = ""
            div.style.paddingTop = "" 
        }
        for (var i=0; i<p.length; i++){
            if (scrollTop + navH >= p[i].offsetTop/1.1) {
                for (var j=0; j<p.length; j++) {
                    li[j].className = ""
                }
                li[i].className = "cur"
            }
        }
    }
    for (var k=0; k<p.length; k++) {
        var scroll = document.documentElement
        var timer
        li[k].index = k
        li[k].onclick = function () {
            var self = this
            clearInterval(timer)
            timer = setInterval(function(){
                console.log(scroll.scrollTop)
                if (scroll.scrollTop + navH <= p[self.index].offsetTop) {
                    scroll.scrollTop += Math.ceil(p[self.index].offsetTop/10)
                    if (scroll.scrollTop + navH >= p[self.index].offsetTop) {
                        scroll.scrollTop = p[self.index].offsetTop - navH
                        clearInterval(timer) 
                    }
                } else {
                    scroll.scrollTop /= 1.5
                    if (scroll.scrollTop + navH <= p[self.index].offsetTop) {
                        scroll.scrollTop = p[self.index].offsetTop - navH
                        clearInterval(timer)
                    }
                }
            },20)
        }
    }

</script>
</html>

microkof

48711827

发布于
2017-01-05

坦白说分析你的代码意义不大。无数的方法都能实现你的需求，何必自己写轮子。

比如按钮是 $('#back-top a')

  $('#back-top a').on("click", function(){
      $('body,html').animate({
          scrollTop: 0
      }, 800);
      return false;
  });

撰写回答

你尚未登录，登录后可以

和开发者交流问题的细节
关注并接收问题和回答的更新提醒
参与内容的编辑和改进，让解决方法与时俱进

推荐问题

利用滚动监听回到顶部的时候，吸附在顶端的导航栏会抖一下，请问是什么原因？

你尚未登录，登录后可以

js 如何将Key属性相同的放在同一个数组？

为什么在谷歌浏览器中 'a' == ['a'] 返回 true？

vue项目如何在初始化之前跳转外部页面？

js如何控制移动端overflow:scroll容器滑动的最大速度？

前端代码更新如何通知用户刷新页面？

纯css如何绘制一个无背景色有边框色，带有文字的倒等腰梯形？

css布局怎么保证右边一直在可视范围内？