页面滚动 侧边导航栏改变，点击导航栏内容，相应页面内容到达顶部

最新推荐文章于 2022-12-22 10:55:14 发布
最新推荐文章于 2022-12-22 10:55:14 发布
阅读量1k 收藏 11
点赞数
文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lxyxfx/article/details/111317324
版权

页面滚动 侧边导航栏改变，点击导航栏内容，相应页面内容到达顶部
在这里插入图片描述
在这里插入图片描述
mounted（）：中 nav获取到页面模块距离顶部的高度， 在利用gettop方法去页面滚动时候到达的滚动高度做比较，改变导航栏样式
注意
在这里插入图片描述
在这里插入图片描述

最后出来的结果：在这里插入图片描述

侧边栏也可点击按钮 实现页面模块到达顶部

闪电小飞侠.
关注
  • 0
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
uni实现路过导航导航固定到顶部点击导航栏内容滚动到本页面对应位置
qwe19991123的博客
12-02 556
我导航是图片 <view class="navWrap" ref="nav"> <view class="nav"> <image @click="navTitle(1)" class="eduImg" src="../../static/1212/eduImg.png" mode=""></image> <image @click="navTitle(2)" class="firstOrderTitleIm
可展开收缩炫酷侧边导航栏.rar
06-28
这段代码会在按钮被点击时，切换侧边导航栏的`show`类，从而实现展开或收缩的效果。由于CSS已经定义了`transition`，所以变化会非常平滑，呈现出炫酷的动画效果。 此外，为了提高用户体验，我们还可以添加一些额外...
jQuery定位滚动导航效果特效代码
03-20
jQuery定位滚动导航效果代码是一款很常见的效果，非常实用，滚动滚动条时，导航固定顶部，并且滚动到对应的板块时，当前导航高亮显示，点击导航文字时平滑跳转到对应的板块。
侧边导航栏点击对应模块滑动到页面顶部
韩大璐
10-23 1756
$('body,html').animate({ scrollTop:$('.itemBox').eq(index).offset().top },800) itemBox是要滚动到顶部的盒子的类名，如果是整个页面滚动到顶部，就用 body，html代替itemBox index是侧边导航栏按钮的索引 ...
JavaScript缓慢滚动到页面顶部——电梯导航栏fixed定位(1+X Web前端开发初级 例题)
黛琳ghz的博客，期待你的关注。
04-16 2704
🚀什么是电梯导航栏 当页面内容过多时，浏览网页时滚动距离会变大，当你想回看上面的内容时，需要用鼠标滚轮或拉动滚动条来移动回去。这时如果网页设置电梯导航栏会提高网页阅读的方便性和高效性，我们只需要操作电梯导航栏上面的功能，就能去想要的模块，比如点击返回顶部按钮后会调转到页面顶部。
点击导航滚动到指定位置 (滑动到指定位置对应导航自动选中)Vue3+js
zhu_menglu的博客
12-22 2786
注：部分组件使用的naive-Ui。
jq实现点击导航栏滚动到对应位置（锚点跳转滑动效果）和导航栏菜单项随页面滚动而变化
_EL
04-18 1万+
点击导航栏滚动到对应位置（延迟效果） 1.跳转实现 <div id="a"></div> <a href="#a">跳转</a> 如上图两行代码便可实现a标签‘#’后面跟对应的id值 2.锚点跳转滑动效果 <style> .btn{ position:fixed; right:10%; top:20%; } .btn a{ di...
jquery+css实现侧边导航栏效果
12-11
当有顶部导航栏的时候侧边导航栏会消失。 响应式方面，同样的顶部导航栏消失后右下角的图标才出现。点击出现导航，选中后消失； 这里是个demo ，没有做平滑滚动，需要的可以自己加上。 大体就介绍这么多吧，下面上...
侧边导航滚动监听.zip
08-03
在IT行业中，侧边导航滚动监听是一个常见的交互设计，它主要应用于网页或应用程序的界面，让用户在滚动页面时，侧边导航菜单能跟随用户的滚动位置动态更新，提供更好的浏览体验。这种技术通常涉及到JavaScript、CSS...
jQuery悬浮侧边导航栏监听代码.zip
最新发布
10-05
本篇将详细讲解如何利用jQuery实现一个悬浮侧边导航栏的监听代码，同时涉及CSS特效和JavaScript特效的应用。 首先，我们需要创建HTML结构，这通常包括一个侧边栏和一些链接元素。例如： ```html <li><a href=...
网页页面中状态栏文字特效
08-25
javascript基于状态栏的动态文字，非常酷！！状态栏文字特效
左侧固定导航栏点击滑动对应页面
06-04
左侧固定导航栏点击滑动对应页面
JS实现随页面滚动显示/隐藏窗口固定位置元素
10-22
窗口固定位置显示元素，当页面高度大于某高度，并且页面向下滚动时，显示该元素；当页面位置小于某高度，或者页面向上滚动时，隐藏该元素，下面通过本文给大家介绍JS实现随页面滚动显示/隐藏窗口固定位置元素，需要的朋友参考下吧
js Tab选项卡标签滑动带滚动条的内容滚动切换显示代码
06-24
js Tab选项卡标签滑动带滚动条的内容滚动切换显示代码 http://www.17sucai.com/pins/5386.html
网页状态栏显示特效......
06-05
网页状态栏显示特效+网页状态栏显示特效+网页状态栏显示特效+网页状态栏显示特效
jQuery网页滚动显示浮动导航带返回顶部.zip
07-11
返回顶部按钮通常在页面底部或侧边，当用户向下滚动一定距离后出现，点击则使页面瞬间回到顶部。这可以通过监听滚动事件，判断滚动条位置，然后动态显示或隐藏按钮，点击时使用`$('html, body').animate({ scrollTop...
html左侧导航滑动网页定位效果源码,Javascript实现页面滚动时导航智能定位
weixin_28890941的博客
06-03 1023
常见的开发页面中可能会有这么一个需求，页面中会有多个模块，每个模块对应一个导航，当页面滚动到某个模块时，对应的模块导航需要加上一个类用于区分当前用户所浏览区域。假设结构如下：section1section2section3section4section5section1section2section3section4section5页面滚动时导航定位js代码如下：var $navs = $('na...
vue-element-admin改造顶部一级导航，侧边二级导航
热门推荐
weixin_43180359的博客
05-19 1万+
本项目是基于vue-element-admin的基础模板vue-admin-template进行改造的，因为实际项目很多会用到顶部导航菜单和侧边导航相结合的情况，为了满足这种需求做了改造。 先上效果图： 改造过程： 目前业务较多，改造过程后期补上。 代码仓库地址： 我的码云仓库 ...
vue-cli 添加顶部导航栏及点击导航菜单，左侧菜单栏切换
qq_40936424的博客
03-26 6027
layout-------------模板包含菜单栏等主要框架 router--------------路由管理,根据路由可生成左侧菜单栏 /** When your routing table is too long, you can split it into small modules**/ import Layout from '@/layout' var search = [ {...
用js编写一个侧边导航栏
04-25
好的，以下是我为您提供的样例代码，您可以根据实际需求进行修改： HTML： ``` <div class="sidebar"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> <a href="#">Link 4</a> </div> ``` CSS： ``` .sidebar { height: 100%; /* 让导航栏充满整个高度 */ width: 200px; /* 设置导航栏宽度 */ position: fixed; /* 使导航栏固定在页面上 */ top: 0; /* 将导航栏定位到页面顶部 */ left: 0; /* 将导航栏定位到页面左边 */ background-color: #222; /* 设置导航栏背景色 */ overflow-x: hidden; /* 禁止导航栏水平滚动 */ padding-top: 20px; /* 设置导航栏顶部内边距 */ } /* 导航栏内部链接样式 */ .sidebar a { padding: 6px 8px 6px 16px; /* 设置链接内边距 */ text-decoration: none; /* 去除下划线 */ font-size: 20px; /* 设置字体大小 */ color: #ccc; /* 设置字体颜色 */ display: block; /* 将链接设置为块级元素 */ } /* 链接鼠标悬浮样式 */ .sidebar a:hover { color: #fff; } ``` JavaScript： ``` // 打开导航栏按钮点击事件 function openNav() { document.querySelector(".sidebar").style.width = "200px"; } // 关闭导航栏按钮点击事件 function closeNav() { document.querySelector(".sidebar").style.width = "0"; } ``` 在页面中引入以上HTML、CSS和JavaScript代码，即可实现一个简单的侧边导航栏。您也可以根据需要进行修改和美化。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值