【CSS】页面滚动到一定位置时，指定区域固定不变

一. 需求

1. 移动端：下滑时，当下滑到一定位置时，指定区域不跟随下滑-【固定跟随区域】一直在顶部
2. 效果
   （1）未滚动前
   （2）滚动后

二. 实现

<template>
  <div class="global-application">
    // 顶部【不跟随】区域
    <div class="nav-background"></div>
    // 固定【跟随】区域
    <div class="tab-nav">
      // 导航栏-标题
      <div class="navBar">
        <div class="nav-title">
          <div @click="handBack">
            <img class="arrow" src="@/assets/images/back-arrow.svg" />
          </div>
          <div class="title">{{ props.title }}</div>
          <div>
          </div>
        </div>
        <div class="nav-bg"></div>
      </div>
      // 时间
      <div>2024.11.25</div>
    </div>
    // 其余内容
  </div>
</template>

<script setup>
/**
 * 返回上一页
 */
const handBack = () => {
  router.push({
    path: '/index'
  })
}
</script>

<style lang="scss" scoped >
// 关键代码
.global-application{
  	height: 100vh;
  	position: relative;
  	overflow: auto;
}
.nav-background {
    height: 88px;
    background-color: rgb(44, 88, 236);
}
// 关键代码
.tab-nav{
  	position: -webkit-sticky;
  	position: sticky;
  	top: 0;
  	z-index: 1000001;
}
.navBar {
  background-color: rgb(44, 88, 236);
  height: 88px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  .nav-title {
    display: flex;
    justify-content: space-between;
    height: 88px;
    align-items: center;
    margin: 0 75px 20px 35px;

    .arrow {
      width: 14px;
      height: 28px;
      display: inline-block;
    }

    .title {
      font-size: 36px;
      font-weight: 500;
      color: rgba(255, 255, 255, 1);
    }
  }
}
</style>

三. 知识

1. position: sticky;
2. position: relative;