「组件」侧边hover锚点导航双向绑定

昔不亏 等级 445 0 0

样式如图: 「组件」侧边hover锚点导航双向绑定 1:在components文件夹下新建SideAnchorNav.vue

<template>
    <div class="sideAnchorNav">
        <div class="left-nav" :class="navText?'navHover':''" @mouseenter="navText=true" @mouseleave="navText=false"></div>
        <ul class="nav-link" @mouseenter="navText=true" @mouseleave="navText=false">
            <li class="nav" :class="index==activeMenu?'anchorNavSelect':''" v-for="(item,index) in allMenuList" :key='index'
             @click="jump(index)"><a href="javascript:void(0)"><span :class="index==activeMenu||navText?'spanHover':''">{{item}}</span></a></li>
        </ul>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                navText: false,
                scroll: null,
                activeMenu: null,
            }
        },
        props: ['allMenuList'],//!!!注意
        mounted() {
            window.addEventListener('scroll', this.dataScroll);
        },
        watch: {
            scroll: function() {
                this.loadSroll()
            }
        },
        methods: {
            dataScroll: function() {
                this.scroll = document.documentElement.scrollTop || document.body.scrollTop;
            },
            jump(index) {
                this.activeMenu = index
                let jump = document.getElementsByClassName('section');//!!!注意
                let total = jump[index].offsetTop;
                document.body.scrollTop = total;
                document.documentElement.scrollTop = total - 70;
                window.pageYOffset = total;
            },
            loadSroll: function() {
                var self = this;
                var navs = document.getElementsByClassName('nav')
                var sections = document.getElementsByClassName('section');//!!!注意
                for (var i = 0; i < sections.length; i++) {
                    if (self.scroll >= sections[i].offsetTop - 200) {
                        this.activeMenu = i
                    }
                    if (self.scroll == 0) {
                        this.activeMenu = null
                    }
                }

            },
        }
    }
</script>

<style lang="scss">
    .sideAnchorNav {
        .left-nav {
            height: 100%;
            width: 500px;
            position: fixed;
            top: 0;
            left: -250px;
            z-index: 10;
        }

        .navHover {
            background-image: linear-gradient(to right, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0.2));
            filter: blur(40px);
        }

        .nav-link {
            position: fixed;
            left: 3%;
            top: 35%;
            z-index: 1;
            color: white;
            z-index: 20;
        }

        .nav {
            a {
                color: white;
                font-size: 16px;
            }

            opacity: 0.6;
            line-height: 1;

            span {
                opacity: 0;
                transition: all 0.5s;
            }

            span:hover {
                text-decoration: underline;

            }

            .spanHover {
                line-height: 3;
                opacity: 1;
            }
        }

        .anchorNavSelect {
            opacity: 1;
            border: none;

            a {
                color: orange;
            }
        }
    }
</style>

2:在需要使用的页面中

<SideAnchorNav :allMenuList="this.allMenuList"></SideAnchorNav>
import SideAnchorNav from '@/components/SideAnchorNav .vue'
components: { SideAnchorNav },
allMenuList: ['SAP 产品', 'PA全球顾问认证', '教育培训资源', '教育培训解决方案'],//!!!自行更改
在相对应的div上加class="section",
收藏
评论区

相关推荐

Java中的浮点数四舍五入到小数点后2位的几种方法
前言 四舍五入到2或3个小数位是我们Java程序员日常开发中肯定会遇到。幸运的是,Java API提供了几种在Java中舍入数字的方法 我们可以使用Math.round(),BigDecimal或DecimalFormat将Java中的任何浮点数四舍五入到n个位置。我个人更喜欢使用BigDecimal在Java中四舍五入任何数字,因为它具有便捷的API并
Golang常用工具
文章目录 go vet(about:blankgo_vet_3) gotype(about:blankgotype_23) goreturns(about:blankgoreturns_29) gofmt(about:blankgofmt_49) goimports(a
爬取3万景点,分析十一哪里人从众从人?
作为一名普通上班族,每个星期都在无休止的上班(没准还加班)之中度过。几个月前一直心心念念的可就是这十一的“小长假”(还调班两天)。 朱小五这次爬取分析携程国内150个热点城市的景点数据,简单的分析一下哪些景点比较受欢迎。用来预计分析一下这个十一哪里最可能人从众从人? 让我们来分析一下。 获取数据 首先,我们来明确一
前端 滚动到目标元素位置 VUE 版本
1、前言 想起之前一次在写一个小程序商城时候,详情页的类似锚点的跳转花了我不少时间,因为刚写,对小程序滚动,滚动距离那套不熟悉加之本身对什么滚动高度,元素距离顶部距离不是很了解,花了挺长时间的,这几天有空,就研究了下。 2、先看效果 在这里插入图片描述(https://imghelloworld.osscnbeijing.aliyuncs.c
讲解Excel中16种图表类型的“含义”,这次该知道怎么画图了!
(https://imghelloworld.osscnbeijing.aliyuncs.com/d61464c6ae6fdb4aba5501534164e09c.png) 大家都知道,相同的数据,使用不同的图表进行体现,效果也会千差万别,那么我们应该如何正确选择,才能让图表的作用发挥到极致呢? 1.柱形图
Spring Cloud OAuth2 微服务认证授权
OAuth 2.0 是用于授权的行业标准协议,它致力于简化客户端开发人员的工作,同时为 Web 应用、桌面应用、移动应用等各种客户端应用提供了特定的授权流程。本文讲解如何使用 OAuth2 协议来授权客户端应用访问 Spring Cloud 微服务。 微服务认证授权概述 单点登录 相比于单体应用,微服务应用需要在多个服务之间共享
「解决 — 小bug」使用了锚点的页面跳转后滚动条仍停留在原先位置而不是顶部
在router.js中加入: jsroutes: [...],scrollBehavior (to, from, savedPosition) return x: 0, y: 0
「组件」侧边hover锚点导航双向绑定
样式如图:1:在components文件夹下新建SideAnchorNav.vue js<template <div class"sideAnchorNav" <div class"leftnav" :class"navText?'navHover':''" @mouseenter"navTexttrue" @mou
python刷题-圆的面积
问题描述给定圆的半径r,求圆的面积。 输入格式输入包含一个整数r,表示圆的半径。 输出格式输出一行,包含一个实数,四舍五入保留小数点后7位,表示圆的面积。说明:在本题中,输入是一个整数,但是输出是一个实数。对于实数输出的问题,请一定看清楚实数输出的要求,比如本题中要求保留小数点后7位,则你的程序必须严格的输出7位小数,输出过多或者过少的小数位数都是不
讲解Excel的16种图表类型的“含义”,知道该怎么画图了!
大家好,我是小五🐶 相同的数据,使用不同的图表进行体现,效果也会千差万别,那么我们应该如何正确选择,才能让图表的作用发挥到极致呢? 1.柱形图 柱形图是最常见的图表类型,它的适用场合是二维数据集(每个数据点包括两个值,即X和Y),但只有一个维度需要比较的情况。例如,如下图所示的柱形图就表示了一组二维数据,【年份】和【销售额】就是它的两个维度,但只需要比
散点图的 点 能不能换成 头像 啊?​
作者:朱小五 大家好,我是小五昨天晚上有位群友提出了这样一个问题:散点图里的点被替换成了每个运动员的头像,这种可视化图形如何制作?大图讨论一波,发现powerbi、Tableau、Excel都能做,那么今天小五就用Excel简单处理一下。先生成几条数据,并点击插入图表生成散点图。| x轴 | y轴 || | || 0.5 | 12 || 1 | 30
爬取3万景点,分析十一哪里人从众从人?
作为一名普通上班族,每个星期都在无休止的上班(没准还加班)之中度过。几个月前一直心心念念的可就是这十一的“小长假”(还调班两天)。 朱小五这次爬取分析携程国内150个热点城市的景点数据,简单的分析一下哪些景点比较受欢迎。用来预计分析一下这个十一哪里最可能人从众从人? 让我们来分析一下。 获取数据 首先,我们来明确一下我们想要爬取的数据是哪些,这里
吹爆了这个可视化神器,上手后直接开大~
大家好,我是明哥。今天给大家推荐一个可视化神器 Plotly\express ,上手非常的简单,基本所有的图都只要一行代码就能绘出一张非常酷炫的可视化图。 以下是这个神器的详细使用方法,文中附含大量的 GIF 动图示例图。注:源代码( .ipypnb 文件)的获取方式,我放在文末了。记得下载1\. 环境准备本文的是在如下环境下测试完成的。 Pytho
Python小白零基础入门 —— 变量及简单的数据类型
最近想着出一个Python小白零基础入门系列的文章,希望能对入门的小伙伴有所帮助,内容会囊括简单的数据类型、列表、字典、循环以及函数的定义,对于一些概念会以图解的方式进行讲解。今天这篇文章就介绍一下Python中的变量以及简单的数据类型,文末还列了一些练手的题目,大家可以边学边练!一、变量1、变量是什么在Python中,变量是用来 储存数据 的,更直白点,变
RabbitMQ知识点
插件目前,RabbitMQ 支持安装的插件有:rabbitmqamqp10、rabbitmqdelayedmessageexchange、rabbitmqfederation、rabbitmqsharding、rabbitmqshovel、rabbitmqtracing、rabbitmqmqtt、rabbitmqwebmqtt、rabbitmqstomp、r