滑动吸顶效果实现原理与应用策略

前端

2023-11-29 18:33:14

滑动吸顶效果实现原理

滑动吸顶效果的实现原理是：

创建一个固定在页面顶部的容器，通常使用定位属性 position:fixed; 来实现。
当页面滚动到一定位置时，将容器的 position 属性从 fixed 改为 absolute;，这样容器就会跟随页面滚动而移动。
当页面滚动到容器的高度时，将容器的 position 属性重新改为 fixed;，这样容器就会再次固定在页面顶部。

滑动吸顶效果应用策略

滑动吸顶效果可以应用到各种场景中，例如：

导航栏：当页面滚动到一定位置时，导航栏会固定在页面顶部，方便用户随时访问。
侧边栏：当页面滚动到一定位置时，侧边栏会固定在页面顶部，方便用户随时查看相关信息。
浮动按钮：当页面滚动到一定位置时，浮动按钮会固定在页面底部，方便用户快速回到页面顶部。

代码示例

以下是一个使用 Vue 组件实现滑动吸顶效果的代码示例：

<template>
  <div id="app">
    <div class="header">
      <h1>Vue 滑动吸顶效果</h1>
    </div>
    <div class="content">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eget lacus eget nunc tincidunt laoreet. Donec euismod tempor lacus, sit amet ullamcorper nunc. Nunc euismod commodo lacus, eget ullamcorper nunc. Nunc euismod commodo lacus, eget ullamcorper nunc.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eget lacus eget nunc tincidunt laoreet. Donec euismod tempor lacus, sit amet ullamcorper nunc. Nunc euismod commodo lacus, eget ullamcorper nunc. Nunc euismod commodo lacus, eget ullamcorper nunc.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eget lacus eget nunc tincidunt laoreet. Donec euismod tempor lacus, sit amet ullamcorper nunc. Nunc euismod commodo lacus, eget ullamcorper nunc. Nunc euismod commodo lacus, eget ullamcorper nunc.</p>
    </div>
    <div class="footer">
      <p>Copyright © 2023 Vue 滑动吸顶效果</p>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const isFixed = ref(false)

    window.addEventListener('scroll', () => {
      if (window.scrollY > 100) {
        isFixed.value = true
      } else {
        isFixed.value = false
      }
    })

    return {
      isFixed
    }
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin: 0 auto;
}

.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 60px;
  background-color: #f5f8fa;
  z-index: 99;
}

.content {
  margin-top: 60px;
  padding: 20px;
}

.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60px;
  background-color: #f5f8fa;
  z-index: 99;
}
</style>