极客观点
项目管理
HarmonyOS
先放图，目前效果：
我是通过判断导航栏距离顶部的大小来给它一个position:fiexd；，但是现在的问题主要就是不能无缝的衔接起来。
因为代码进行判断的时候，导航栏的移动距离已很大了。
比如我是判断距离在0~10像素间的时候定位到浏览器顶部，但是实际上通过touchmove,在滑动的时候对导航栏位置的取值频率太低了，有可能已经划过了30px才取一次，这样的话不能精确控制它的位置。
请问有什么更好的办法吗？
最难的一点就是：无法通过scrollTop获取页面滚动的距离，我是通过getBoundingClientRect().top来获取元素距离顶部的位置。但是不能精确/高频率的获取值
更新
用的vue.js
// 组件
<template>
<! -- 滚动的部分,父级组件高度固定，设置overflow:scroll; -->
<div class="wrapper" ref="page">
<!--head-->
<p-header></p-header>
<!--nav 需要贴边的导航栏 -->
<div class="out-wrapper" ref="navbarWrap">
<div class="tabbar-wrapper" ref="navbar">
<router-link class="tabbar-btn" to="/home_page/article">
<span>探文</span>
<div class="line"></div>
</router-link>
<router-link class="tabbar-btn" to="/home_page/shop">
<span>店铺</span>
<div class="line"></div>
</router-link>
<router-link class="tabbar-btn" to="/home_page/album">
<span>相册</span>
<div class="line"></div>
</router-link>
</div>
</div>
<!--list-->
<transition>
<keep-alive>
<router-view></router-view>
</keep-alive>
</transition>
</div>
</template>js部分
mounted() {
// page:滚动的页面,navbar:导航栏,
// navWrap:用来给nav占位的元素，
// navLoc:保存页面加载后导航栏距离顶部的位置
let page = this.$refs.page;
let navbar = this.$refs.navbar;
let navWrap = this.$refs.navbarWrap;
let navLoc = navWrap.getBoundingClientRect().top;
let self = this;
page.onscroll=function (event) {
console.log('scroll') // 没有触发
}
page.addEventListener('scroll',function (event) {
console.log('croll') // 没有触发
let _navWrapTop = navWrap.getBoundingClientRect().top;
console.log('navWrap',_navWrapTop)
})
window.addEventListener('scroll',function () {
console.log('window') // 没有打印
})
page.addEventListener('touchmove', function (event) {
let moveLoc = page.getBoundingClientRect().top
// 逻辑判断 往上还是往下
if (moveLoc - self.startLoc > 0) {
// 往下
console.log('down');
let _navWrapTop = navWrap.getBoundingClientRect().top;
console.log('nav距离顶部',_navWrapTop)
if(_navWrapTop>=0){
console.log('满足条件')
navbar.style.position = 'relative';
self.count =0
}else {
console.log('nonono')
}
} else if (moveLoc - self.startLoc < 0) {
// 向上
console.log('up')
// 方案2
if (navbar.getBoundingClientRect().top <= 10) {
if(self.count ==0){
navbar.style.position = 'fixed';
navbar.style.top = '0';
navbar.style.zIndex = '999';
self.count +=1;
}
}
}
})
}
应该是判断scrollTop > 本身导航离顶部距离 就设置浮动吧.