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

<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.scrollTopvar offsetTop = document.querySelector('#searchBar').offsetTopif (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样式

<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 直接完成此功能 不影响后续操作前提你有相对参考

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

css布局

.stickyRight{
position:sticky;
top:0
}

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