1、本熟js的圆式：

      * {
        margin: 0;
        padding: 0;
      }
      body {
        height: 二000px;
      }
      .header {
        height: 一00px;
        background-color: red;
      }
      .nav {
        line-height: 五0px;
        background-color: greenyellow;
        text-align: center;
      }
      .nav.fixed {
        position: fixed;
        top: 0;
        width: 一00%;
      }
      .container {
        height: 五00px;
        background-color: yellow;
      }
      .container.marginTop {
        margin-top: 五0px;
      }
    <div class="header"></div>
    <div class="nav">尔是导航栏</div>
    <div class="container">
      <ul>
        <li>一</li>
        <li>二</li>
        <li>三</li>
        <li>四</li>
        <li>五</li>
      </ul>
    </div>
      const headerHeight = document.querySelector('.header').offsetHeight // header的下度
      const nav = document.querySelector('.nav')
      const container = document.querySelector('.container')
      window.addEventListener('scroll', () => {
        const scrollTop =
          document.documentElement.scrollTop ||
          window.pageYOffset ||
          document.body.scrollTop // 背上卷曲进来的间隔
        // 当滚动条背上卷曲进来的间隔年夜于等于header的下度时，给nav添减流动定位，而且给container添减
        if (scrollTop >= headerHeight) {
          nav.classList.add('fixed')
          container.classList.add('marginTop')
        } else {
          nav.classList.remove('fixed')
          container.classList.remove('marginTop')
        }
      })

 

 

 

2、vue

<template>
  <div id="app">
    <header></header>
    <div class="container">
      <div class="nav">导航</div>
      <ul>
        <li>一</li>
        <li>二</li>
        <li>三</li>
        <li>四</li>
        <li>六</li>
      </ul>
    </div>
  </div>
</template>
  mounted() {
    this.ceiling()
  },
  methods: {
    ceiling() {
      const headerHeight = document.querySelector('header').offsetHeight + 二0 // 二0是高低边距减起去二0px
      const nav = document.querySelector('.nav')
      const container = document.querySelector('.container')
      window.addEventListener('scroll', () => {
        const scrollTop =
          document.documentElement.scrollTop ||
          window.pageYOffset ||
          document.body.scrollTop
        console.log(scrollTop, headerHeight)
        if (scrollTop >= headerHeight) {
          nav.classList.add('fixed')
          container.classList.add('marginTop')
        } else {
          nav.classList.remove('fixed')
          container.classList.remove('marginTop')
        }
      })
    }
  }
#app {
  height: 一000px;
  padding: 一0px;
  header {
    height: 一00px;
    background-color: red;
  }
  .container {
    margin-top: 一0px;
    .nav {
      line-height: 四0px;
      text-align: center;
      background-color: yellowgreen;
    }
    .nav.fixed {
      position: fixed;
      top: 0;
      width: calc(一00% - 二0px);
    }
    > ul {
      background-color: yellow;
      height: 五00px;
    }
  }
  .container.marginTop {
    margin-top: 五0px; // nav下度四0 + 本有的margin-top: 一0px
  }
}
View Code

 

转自：https://www.cnblogs.com/wuqilang/p/15362678.html

更多文章请关注《万象专栏》