vue悬浮导航实现内容滚动时，导航跟随选中，点击导航滚动到相应位置，

<template><div><div class="goods_navBg" ref="navHeader">模拟悬浮导航</div><div class="goods_box">box</div><!-- 吸顶导航 start --><GoodsInfoNavTab class="goods_sticky" :navHeaderHeight="navHeaderHeight" :tabTitle="tabTitle"></GoodsInfoNavTab><!-- 吸顶导航 end --><ul class="ulMain"><li class="goodsMBox" v-for="(item, index) in tabTitle" :key="index">{{ item }}</li></ul></div>
</template>
<script>
export default {name: 'goodsPage',data() {return {tabTitle: ['Tab1', 'Tab2', 'Tab3', 'Tab4'],//子导航navHeaderHeight: 0,//子导航高度}},mounted() {//获取悬浮导航的高度this.navHeaderHeight = this.$refs.navHeader.offsetHeight;},methods: {}
}
</script>
<style scoped>
.goods_navBg {width: 7.5rem;height: 0.88rem;background: red;z-index: 999;position: fixed;top: 0;left: 0;text-align: center;font-size: 0.4rem;line-height: 0.88rem;color: white;
}.goods_box {width: 100%;height: 5rem;background: green;margin-top: 0.88rem;font-size: 1rem;text-align: center;line-height: 5rem;
}.goods_sticky {position: sticky;top: 0.88rem;z-index: 99;
}.ulMain {width: 100%;
}.goodsMBox {height: 10rem;font-size: 0.5rem;color: white;
}.ulMain li:nth-child(1) {background: blue;
}.ulMain li:nth-child(2) {background: blueviolet;
}.ulMain li:nth-child(3) {background: orange;
}.ulMain li:nth-child(4) {background: pink;
}</style>

导航组件：

<template><div><ul class="goods_ceiling" ref="navTab"><a v-for="(item, index) in tabTitle" :key="index" @click="scrollToPosition(index)":class="{ js_goods_ceilTitle: active == index }"><li class="goods_ceilTitle">{{ item }}</li></a></ul></div>
</template>
<script>
export default {name: 'GoodsInfoNavTab',props: {tabTitle: {type: Array,default: () => []},navHeaderHeight: {type: Number,default: 0}},data() {return {active: 0,// 当前激活的导航索引}},mounted() {//监听页面滚动条事件window.addEventListener("scroll", this.onScroll);},destroy() {// 必须移除监听器，不然当该vue组件被销毁了，监听器还在就会出错window.removeEventListener("scroll", this.onScroll);},methods: {onScroll() {let navTabHeight = this.$refs.navTab.offsetHeight //获取子导航的高度let navHeaderHeight = this.navHeaderHeight //获取悬浮导航的高度// 获取所有锚点元素const navContents = document.querySelectorAll('.goodsMBox')// 所有锚点元素的 offsetTopconst offsetTopArr = []navContents.forEach(item => {offsetTopArr.push(item.offsetTop)})// 获取当前文档流的 scrollTopconst scrollTop = document.documentElement.scrollTop || document.body.scrollTop// 定义当前点亮的导航下标let navIndex = 0for (let n = 0; n < offsetTopArr.length; n++) {// 如果 scrollTop 大于等于第 n 个元素的 offsetTop 则说明 n-1 的内容已经完全不可见// 那么此时导航索引就应该是 n 了if (scrollTop >= offsetTopArr[n] - navTabHeight - navHeaderHeight) {navIndex = n}}// 把下标赋值给 vue 的 datathis.active = navIndex},scrollToPosition(index) {let navTabHeight = this.$refs.navTab.offsetHeight //获取子导航的高度let navHeaderHeight = this.navHeaderHeight //获取悬浮导航的高度// 获取目标的 offsetTop// css选择器是从 1 开始计数，我们是从 0 开始，所以要 +1const targetOffsetTop = document.querySelector(`.goodsMBox:nth-child(${index + 1})`).offsetTop - navTabHeight - navHeaderHeight// 获取当前 offsetToplet scrollTop = document.documentElement.scrollTop || document.body.scrollTop// 定义一次跳 50 个像素，数字越大跳得越快，但是会有掉帧得感觉，步子迈大了会扯到蛋const STEP = 50// 判断是往下滑还是往上滑if (scrollTop > targetOffsetTop) {// 往上滑smoothUp()} else {// 往下滑smoothDown()}// 定义往下滑函数function smoothDown() {// 如果当前 scrollTop 小于 targetOffsetTop 说明视口还没滑到指定位置if (scrollTop < targetOffsetTop) {// 如果和目标相差距离大于等于 STEP 就跳 STEP// 否则直接跳到目标点，目标是为了防止跳过了。if (targetOffsetTop - scrollTop >= STEP) {scrollTop += STEP} else {scrollTop = targetOffsetTop}document.body.scrollTop = scrollTopdocument.documentElement.scrollTop = scrollTop// 屏幕在绘制下一帧时会回调传给 requestAnimationFrame 的函数// 关于 requestAnimationFrame 可以自己查一下，在这种场景下，相比 setInterval 性价比更高requestAnimationFrame(smoothDown)}}// 定义往上滑函数function smoothUp() {if (scrollTop > targetOffsetTop) {if (scrollTop - targetOffsetTop >= STEP) {scrollTop -= STEP} else {scrollTop = targetOffsetTop}document.body.scrollTop = scrollTopdocument.documentElement.scrollTop = scrollToprequestAnimationFrame(smoothUp)}}},}
}
</script>
<style lang="less" scoped>
.goods_ceiling {width: 7.5rem;height: 1rem;background: white;.flex_item;.f32;justify-content: space-around;
}.goods_ceiling a {.c;
}.goods_ceilTitle {height: 1rem;line-height: 1rem;text-align: center;
}.js_goods_ceilTitle {font-weight: bold;position: relative;
}.js_goods_ceilTitle::after {content: '';position: absolute;bottom: 0;left: 50%;margin-left: -0.3rem;width: 0.6rem;height: 0.08rem;border-radius: 0.18rem;background: @c3b8;
}
</style>

vue悬浮导航实现内容滚动时，导航跟随选中，点击导航滚动到相应位置，相关推荐

Ant Design Vue中a-select组件下拉列表在局部滚动时不跟随问题解决方法
问题如下: 修改方法如下 <a-tree-select:getPopupContainer="triggerNode => {return triggerNode.parent ...
通过js滚轮滚动时调用动画_WOW.js在页面滚动时展现动感的元素动画效果
插件描述:WOW.js 是一款帮助你实现滚动页面时触发CSS 动画效果的插件在一些网页上,当你滚动页面的时候会看到各式各样的元素动画效果,非常动感.WOW.js 就是一款帮助你实现这种 CSS 动画 ...
页面滚动时触发图片逐帧播放_如何在滚动效果上创建逐帧运动图像
页面滚动时触发图片逐帧播放 A step by step guide on how to create that dynamic image background you see everywhere ...
Vue封装下拉框组件时，为document绑定原生事件addEventlistener(click“)，切换页面之后事件还未被摧毁...
1 <script> 2 export default { 3 props: ["lists"], 4 data() { 5 return { 6 isactive: ...
使用 jQuery.Pin 垂直滚动时固定导航
ZKEACMS的导航默认是不能固定的,随着页面的滚动而滚动,为了有更好的用户体验,当页面往下滚动时,可以将导航固定在顶端,这样方便用户点击. jQuery Pin 借助jQuery的一个插件 jQue ...
【vue】仿淘宝商品详情---实现滚动显隐标签页锚点导航
先看图利用css的opacity实现了在滚动时对导航栏透明度的改变,达到导航栏滚动显隐效果说明封装成组件复用的话,首先快捷键的每一项数据需要父组件传入:在父组件定义一个数组作为右侧导航栏的数据: ...
css导航滚动到顶部后保持不动,html-使用CSS滚动时，使导航栏保持顶部
html-使用CSS滚动时,使导航栏保持顶部我正在尝试使导航栏与页面一起移动,但是如果用户向下滚动,则导航栏会停留在顶部. 谁能提供任何示例或如何提供? 非常感激. (我用其他任何语言都没有希望). ...
html 下拉到一定位置,浏览器向下滚动到一定位置继续滚动时，侧边导航固定在页面顶部，再滚动到一定位置时页面再向下滚动侧边导航不再固定。这种效果怎么实现呢...
1.浏览器向下滚动到一定位置继续滚动时,侧边导航固定在页面顶部,再滚动到一定位置时页面再向下滚动侧边导航不再固定.页面向上滚动到一定位置继续滚动时,侧边导航保持在原来位置.这种效果怎么实现呢 2.. ...
Jquery实现页面滚动时导航智能定位
页面滚动的时候,侧边辅助导航提示到对应的内容.尤其是对于内容很长的页面很好的一个体验. 借助jquery,可以轻松实现.  <div class=" ...
html侧边导航栏跟随页面滚动,页面滚动时，右侧导航栏跟着对应滚动
页面滚动时,右侧导航栏跟着对应滚动方法一: 导航栏对应跳转 *{ margin:0px; padding:0px; text-align:center; color:#fff; font-size: ...

vue悬浮导航实现内容滚动时，导航跟随选中，点击导航滚动到相应位置，

vue悬浮导航实现内容滚动时，导航跟随选中，点击导航滚动到相应位置，相关推荐

最新文章

热门文章