前端吸顶效果

一、原生js的方式：

* {
        margin: 0;
        padding: 0;
      }
      body {
        height: 2000px;
      }
      .header {
        height: 100px;
        background-color: red;
      }
      .nav {
        line-height: 50px;
        background-color: greenyellow;
        text-align: center;
      }
      .nav.fixed {
        position: fixed;
        top: 0;
        width: 100%;
      }
      .container {
        height: 500px;
        background-color: yellow;
      }
      .container.marginTop {
        margin-top: 50px;
      }

<div class="header"></div>
    <div class="nav">我是导航栏</div>
    <div class="container">
      <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</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')
        }
      })

 

 

 

二、vue

<template>
  <div id="app">
    <header></header>
    <div class="container">
      <div class="nav">导航</div>
      <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>6</li>
      </ul>
    </div>
  </div>
</template>

mounted() {
    this.ceiling()
  },
  methods: {
    ceiling() {
      const headerHeight = document.querySelector('header').offsetHeight + 20 // 20是上下边距加起来20px
      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: 1000px;
  padding: 10px;
  header {
    height: 100px;
    background-color: red;
  }
  .container {
    margin-top: 10px;
    .nav {
      line-height: 40px;
      text-align: center;
      background-color: yellowgreen;
    }
    .nav.fixed {
      position: fixed;
      top: 0;
      width: calc(100% - 20px);
    }
    > ul {
      background-color: yellow;
      height: 500px;
    }
  }
  .container.marginTop {
    margin-top: 50px; // nav高度40 + 原有的margin-top: 10px
  }
}

View Code