vue+js实现描点跳转的导航跟着滚动条实现变化

页面代码，导航条为ul部分

        <div class="header-bookmark" ref="bookmark"><ul class="bookmark"><liv-for="(item, index) in bookmark":key="index"class="bookmark-item":class="index === bookmarkindex ? 'active' : ''"@click="changebookmark(index)"><a :href="item.href">{{ item.title }}<span class="bookmark-icon"></span></a><a class="bookmark-line" v-show="item.isline"></a></li></ul><divclass="closebook"ref="closebook"@click="closebook"v-show="isclosebook === true"><img src="@/assets/uho/images/right.png" /></div></div>

页面效果：

css略过，只要是之家了active时的样式

js代码
实现思路：
1、top（）是获取元素距离最外层父元素的距离；
2、在大概的位置添加统一的class，通过document.querySelectorAll(".scroll-class")统一获取；

let h = document.querySelectorAll(".header-nav")[0].offsetHeight

这一部分是顶部导航栏在页面滑动时，会吸顶，计算出的顶部导航栏的距离，在页面滑动计算距离时需要剪掉这一部分

对获取到的DOM循环,跟当前的scrollTop循环对比，当当前页面滚动距离小于描点距离页面的top值，取符合的最小值，改变样式
如果大于，则最后一个改变样式

    top(el) {function getElementTop(elem) {var elemTop = elem.offsetTop; //获得elem元素距相对定位的父元素的topelem = elem.offsetParent; //将elem换成起相对定位的父元素while (elem != null) {//只要还有相对定位的父元素//获得父元素 距他父元素的top值,累加到结果中elemTop += elem.offsetTop; //再次将elem换成他相对定位的父元素上;elem = elem.offsetParent;}return elemTop;}return getElementTop(el);},handleScroll() {var scrollTop =window.pageYOffset ||document.documentElement.scrollTop ||document.body.scrollTop;var list = document.getElementsByClassName("bookmark-item");if (this.$refs.bookmark) {if (scrollTop >= 400) {this.$refs.bookmark.style.background = "#003c7b";this.isclosebook = true;} else {this.$refs.bookmark.style.background = "unset";this.$refs.bookmark.style.display = "block";this.isclosebook = false;this.isshowbook = false;}}//主要是下面这块代码let h = document.querySelectorAll(".header-nav")[0].offsetHeightlet DOM = document.querySelectorAll(".scroll-class");for (let i = 0; i < DOM.length; i++) {let top = this.top(DOM[i]);// console.log(222, top, scrollTop);if (scrollTop < top-h) {this.bookmarkindex = i - 1;break;}else{// console.log(666,i,DOM.length)if(i>=DOM.length-1){this.bookmarkindex = i}}}},

vue+js实现描点跳转的导航跟着滚动条实现变化相关推荐

Vue.js开发记录--用watch监听对象中属性的变化
监听对象中所有属性存在对象obj,若想要监听其中所有的值的变化 watch: {obj: {handler (val) {// coding},deep: true}, } 监听对象中某个属性如果 ...
如何对第一个Vue.js组件进行单元测试
by Sarah Dayan 通过莎拉·达扬 In Build Your First Vue.js Component we made a star rating component. We've c ...
第5章　运维和发布Vue.js项目
第5章运维和发布Vue.js项目一般传统公司特别喜欢一个角色用一个人,如在生产流水线上,一个工人只负责拧螺丝,另一个工人只负责喷漆.很多软件公司也是这样,有人专门负责编写代码,有人专门负责运维.但 ...
关于vue.js 编程导航的使用：实现路由配置和跳转页面
本文主要讲述:通过vue.js 编程导航,实现路由配置和跳转页面的功能! 基础篇,仅作为简单演示. 总结不能保证用户一定会点击某些按钮并且当前操作,除了路由跳转以外,还会有一些别的附加操作(比如执 ...
Vue.js中，如何自己维护路由跳转记录？
在Vue的项目中,如果我们想要做返回.回退操作时,一般会调用router.go(n)这个api,但是实际操作中,使用这个api有风险,就是会让用户跳出当前应用,因为它记录的是浏览器的访问记录,而不是你 ...
vue里面怎么实现页面跳转_vue.js怎样做跳转页面？
vue.js怎样做跳转页面?下面本篇文章给大家介绍一下vue.js跳转页面.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 我们知道在vue里进行页面跳转的话,我们使用这个标签组件 ...
html页面数字滚动,Vue.js大屏可视化数据数字滚动翻转跳转效果（通俗易懂附完整代码）...
原文:Vue.js大屏可视化数据数字滚动翻转跳转效果(通俗易懂附完整代码) 大屏数字滚动翻转效果来源于最近工作中element后台管理页面一张大屏的UI图,该UI图上有一个模块需要有数字往上翻动的效果 ...
【毕业设计】基于Vue.js画作交流平台的设计与实现
文章目录摘要 Abstract 引言系统开发理论基础开发语言简介 HTML5 JavaScript Less PHP R Python Go 框架简介 Vue.js ThinkPHP Flask ...
【转】Vue.js 2.0 快速上手精华梳理
Vue.js 2.0 快速上手精华梳理 Sandy 发掘代码技巧:公众号:daimajiqiao 自从Vue2.0发布后,Vue就成了前端领域的热门话题,github也突破了三万的star,那么对于新 ...

vue+js实现描点跳转的导航跟着滚动条实现变化

vue+js实现描点跳转的导航跟着滚动条实现变化相关推荐

最新文章

热门文章