原生JS实现向下滚动导航栏自动固定在顶部，向上滚动到顶部又恢复效果

前言

上大三了才知道有freecodecamp这么一个网站，最近在上面学习，顺便复习一些前端知识，有个题目是让做一个个人作品集的一个展示界面，写导航栏的时候突然想起以前看到的一个效果，正常情况导航栏是正常展示在顶部，之后用户向下滚动的时候动态设置样式固定在顶部，之后滚动回来时再删除掉样式，用vue这些框架实现就很简单了，但本着学习的的态度，查了些资料，用原生js实现了以上效果。
第一次写博客，不足之处望不吝赐教~~

html代码：

<div class="bg">
    <header>
      <nav class="navbar navbar-expand-md navbar-dark" id="nav" style="background-color:rgb(49, 49, 49)">
        <div class="collapse navbar-collapse" id="collapsibleNavId">
          <ul class="navbar-nav my-2 my-lg-0">
            <li class="nav-item active" id="navbar">
              <a class="nav-link" href="#home">Home</a>
            </li>
            <li class="nav-item" id="navbar">
              <a class="nav-link" href="#about">About</a>
            </li>
            <li class="nav-item " id="navbar">
              <a class="nav-link" href="#portfolio">Portfolio</a>
            </li>
            <li class="nav-item" id="navbar">
              <a class="nav-link" href="#contact ">Contact</a>
            </li>
          </ul>
        </div>
      </nav>
    </header>
    <article>
      <div id="home">
        <div class="col-md-12">
          <div class="welcome">
            <div>
              <h1>Welcome To My Personal Blog</h1>
            </div>
          </div>
        </div>
      </div>
    </article>
  </div>

为了方便使用的是bootstrap4框架，当然也可以自己写，css以及js文件自行引入，这里不再赘述。

css代码

.bg {
    
    
    background: url("https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1692853102,1420366288&fm=27&gp=0.jpg") no-repeat;
    height: 100%;
    width: 100%;
    overflow: hidden;
    background-size: cover;
    text-align: center;
  }

  article {
    
    
    width: 80%;
    margin: 0 auto;
    margin-top: 5px;
  }

  #home {
    
    
    /* background: url("https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=288008406,2182903897&fm=26&gp=0.jpg") no-repeat; */
    background-color: cadetblue;
    height: 1600px;
    overflow: hidden;
    background-size: cover;
  }

  #navbar :hover {
    
    
    background-color: rgb(90, 80, 80);
    box-shadow: 2px, 2px, 2px, #000;
    border-radius: 0.5em;
  }

这里是一些样式美化，可以自行修改。

js代码

重点来了，怎么判断页面向下滚动呢，可以使用document.body.scrollTop(),document.documentElement.scrollTop() 这两个方法获取滚动条据顶部的位置，大于0时设置样式，等于0时移除样式即可，这里的固定顶部样式使用的时bootstrap自带的fixed-top，有需要可以自己写。

   window.onscroll = function () {
    
    
    var dance = document.body.scrollTop || document.documentElement.scrollTop;//获取滚动条据顶部位置
    if (dance > 0) {
    
     //距离大于0时设置固定在顶部样式fixed-top
      while (!document.getElementById("nav").className.match(/(?:^|\s)fixed-top(?!\S)/)) {
    
     //使用正则表达式判断导航栏class是否含有fixed-top
        document.getElementById("nav").className += " fixed-top";//没有就设置，注意前面有空格并且是+=不然之前样式都会被替换成fixed-top;
      }
    } else {
    
    
      document.getElementById("nav").className = document.getElementById("nav").className.replace(
        /(?:^|\s)fixed-top(?!\S)/g, '');//距离等于或小于0时，移除fixed-top
    }
  };

上效果图

注意看控制台样式的变化

此外

document.body.scrollTop() document.documentElement.scrollTop 等方法存在浏览器兼容问题，所以这里有一个小技巧：

var dance = document.body.scrollTop || document.documentElement.scrollTop;

因为这两个方法有一个特点，就是总有一个值恒为零，所以这样写就总有一个值恒为0，不用担心真正的值问题，另外除了这两个方法之外还有 window.pageYOffset window.pageXOffset这两个属性，具体了解可查 http://www.runoob.com/jsref/prop-win-pagexoffset.html

参考网址： https://segmentfault.com/a/1190000008065472