vue.js滑动到顶便锁定位置

html 复制代码

<template>
  <div>
   <div class="nav"></div>
  <div class="searchBar" id="searchBar">
   <ul :class="searchBarFixed == true ? 'isFixed' :''"> 
    <li>区域<i class="iconfont icon-jiantouxia"></i></li>
    <li>价格<i class="iconfont icon-jiantouxia"></i></li>
    <li>房型<i class="iconfont icon-jiantouxia"></i></li>
    <li>更多<i class="iconfont icon-jiantouxia"></i></li>
   </ul>
  </div>
  <div class="content">
  </div>
  </div>
  </template>
  <script>
   export default {
    components:{
    },
  mounted () {
   window.addEventListener('scroll', this.handleScroll)
  },
      data(){
       return {
        searchBarFixed:false
      } 
   },
    methods:{
  handleScroll () {
   var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
   var offsetTop = document.querySelector('#searchBar').offsetTop
   if (scrollTop > offsetTop) {
    this.searchBarFixed = true
   } else {
    this.searchBarFixed = false
   }
  },
   }
   }
  </script>
  <style lang="less" scope>
  .nav{
   height: 250px;
  }
  .content{
   height: 1900px;
  }
  .searchBar{
   .isFixed{
    position:fixed;
    background-color:#Fff;
    top:0;
    z-index:999;
   }
   ul {
    width:100%;
    height: 40px;
    line-height: 40px;
    display: flex;
    li {
     list-style: none;
     font-size: 0.8rem;
     text-align: center;
     flex: 1;
     i {
      font-size: 0.9rem;
      padding-left: 5px;
      color: #ccc;
     }
    }
    border-bottom: 1px solid #ddd;
   }
  }
  </style>

修改为css样式

html 复制代码

<template>
  <div>
    <div class="nav"></div>
    <div class="searchBar" ref="searchBar" :class="{ isFixed: searchBarFixed }">
      <ul>
        <li>区域<i class="iconfont icon-jiantouxia"></i></li>
        <li>价格<i class="iconfont icon-jiantouxia"></i></li>
        <li>房型<i class="iconfont icon-jiantouxia"></i></li>
        <li>更多<i class="iconfont icon-jiantouxia"></i></li>
      </ul>
    </div>
    <div class="content"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchBarFixed: false,
    };
  },
  mounted() {
    this.$nextTick(() => {
      window.addEventListener('scroll', this.handleScroll);
      this.handleScroll();  // 初次加载时执行一次
    });
  },
  beforeDestroy() {
    window.removeEventListener('scroll', this.handleScroll);
  },
  methods: {
    handleScroll() {
      this.$nextTick(() => {
        const searchBar = this.$refs.searchBar;
        if (!searchBar) {
          console.warn('searchBar ref is undefined');
          return;
        }

        const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
        const offsetTop = searchBar.offsetTop;

        if (scrollTop > offsetTop) {
          this.searchBarFixed = true;
        } else {
          this.searchBarFixed = false;
        }
      });
    },
  },
};
</script>

<style>
/* General Styles */
.nav {
  height: 250px;
}

.content {
  height: 1900px;
}

/* Search Bar Styles */
.searchBar {
  position: relative;
  z-index: 10;
  transition: top 0.3s;
  width: 100%; /* 让 searchBar 宽度和父容器相同 */
  max-width: 1200px; /* 设置一个最大宽度 */
  margin: 0 auto; /* 让其水平居中 */
}

.searchBar.isFixed {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%); /* 使其保持居中 */
  width: 100%; /* 宽度保持不变 */
  max-width: 1200px; /* 固定宽度 */
  background-color: #fff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  z-index: 9999;
}

.searchBar ul {
  width: 100%;
  height: 40px;
  line-height: 40px;
  display: flex;
  justify-content: space-around;
  background-color: #fff;
  border-bottom: 1px solid #ddd;
}

.searchBar ul li {
  list-style: none;
  font-size: 0.8rem;
  text-align: center;
  flex: 1;
}

.searchBar ul li i {
  font-size: 0.9rem;
  padding-left: 5px;
  color: #ccc;
}
</style>

当然也可以直接利用css 直接完成此功能不影响后续操作前提你有相对参考

html 复制代码

<div class = "stickyRight">
<div class="right-nav">
</div>
</div>

css布局

css 复制代码

.stickyRight{
position:sticky;
top:0
}

上诉代码含义为当距离顶端0px right-nav在窗口位置固定不动。