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

最新推荐文章于 2023-03-29 12:17:37 发布
原创 最新推荐文章于 2023-03-29 12:17:37 发布 · 1.1k 阅读 · 11 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue

该博客介绍了在Vue中实现页面滚动与侧边导航栏交互的方法。在mounted中获取页面模块距顶部高度，用gettop方法将滚动高度与之比较来改变导航栏样式。最终实现侧边栏点击按钮使页面模块到达顶部的效果。

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

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

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

js实现，点击侧边导航栏，可以平缓的跳到界面指定位置，同时当界面某个元素在浏览器可视范围的时候，相应的导航栏也显示相应的样式
qq_920189602的博客
05-28 2694
注：要下载安装好jquery和element-ui "element-ui": "^2.15.8" "jquery": "^3.6.0" 有时候在使用‘$’报错找不到，可以直接在组件内这样使用 import $ from 'jquery' window.jQuery = $ window.$ = $ 效果如下： html代码： <div> <div class="navBox"> <ul class="navigation"&gt..
侧边导航栏点击对应模块滑动到页面顶部
韩大璐
10-23 1849
$('body,html').animate({ scrollTop:$('.itemBox').eq(index).offset().top },800) itemBox是要滚动到顶部的盒子的类名，如果是整个页面滚动到顶部，就用 body，html代替itemBox index是侧边导航栏按钮的索引 ...
tab 点击左侧导航，右侧对应内容上移顶部（动画）
kaikai4的专栏
01-11 1161
.cp_mid { width: 1210px; margin: 0 auto; position: relative; height: 2000px; overflow: hidden; } .cp_leftnav { width: 200px; height: 60px; line-height: 60px; text-ali
android 可滑动、点击切换的导航栏
qq_25130325的博客
11-19 2118
目前很多应用都是支持滑动切换的，其中实现原理是，顶部是一个RadioGroup + 下面的线条 （我用的是填充）Imageview。 写这个Demo的整个思维是这样的，相当于是图层，最底层是一个Fragment，接着分为顶部 FirstRadioGroup 和 下半部分 ViewPager；然后我这里ViewPager里也是一层Fragment，即下面代码里命名的ContentFragment。
简单记录—vue 用js方法实现侧边导航栏联动选择
qq_44782585的博客
03-29 1673
因为滚动要跟着一起变，所以要在 watch 里面实时监听scroll的变化，发生变化时，判断当前距离顶部最近的是第几章，得到index把侧边目录栏选中样式改为对应的即可实现。页面初始化的时候，给内容滚动的元素加一个侦听事件，定义一个变量 scroll 用来保存当前滚动的数值。页面结构部分，根据数据循环写一个ul > li，生成侧边目录。解决第一个需求，点击任意一条目录页面滚动到对应内容。1、选择任意一条页面滚动到指定目录位置。解决第二个需求，页面滚动，目录跟着滚动。2、页面内容滚动侧边栏跟随一起滚动。
点击导航栏切换页面的几种方式
热门推荐
zsr0526的博客
03-22 5万+
1.RedioGroup+Fragment(推荐) 2.底部线性布局+帧布局(放fragment) 3.RedioGroup+Viewpager
基于html和CSS3制作简单侧边导航栏
09-24
- <div class="sidebar"></div>: 用于包裹整个侧边导航栏的容器，类名sidebar定义了这个容器的样式。 - <ul></ul>: 无序列表用于创建导航栏的菜单项。 - <li></li>: 列表项用于定义每个单独的导航链接。 - <a></...
vue实现中部导航栏布局功能
10-16
具体来说，当用户在页面上半部分滚动时，导航栏跟随滚动保持在页面顶部；当滚动到页面下半部分时，导航栏固定在屏幕顶部，不随页面滚动而移动。 2. **监听滚动事件**：通过监听窗口的滚动事件（`window.scroll`），...
html侧边导航栏跟随页面滚动
最新发布
11-02
HTML侧边导航栏通常通过CSS和JavaScript实现跟随页面滚动的效果，这被称为“Sticky Navigation”或“固定顶部导航”。主要有以下几个步骤： 1. **HTML结构**：保持导航栏独立于主要内容，在 `<header>` 或 `<nav>` ...
jQuery定位滚动导航效果特效代码
03-20
jQuery定位滚动导航效果代码是一款很常见的效果，非常实用，滚动滚动条时，导航固定顶部，并且滚动到对应的板块时，当前导航高亮显示，点击导航文字时平滑跳转到对应的板块。
jq导航栏点击滚动到对应位置 导航栏随页面滑动变化对应导航颜色-附件资源
03-02
jq导航栏点击滚动到对应位置 导航栏随页面滑动变化对应导航颜色-附件资源
html左侧导航滑动网页定位效果源码,Javascript实现页面滚动时导航智能定位
weixin_28890941的博客
06-03 1212
常见的开发页面中可能会有这么一个需求，页面中会有多个模块，每个模块对应一个导航，当页面滚动到某个模块时，对应的模块导航需要加上一个类用于区分当前用户所浏览区域。假设结构如下：section1section2section3section4section5section1section2section3section4section5页面滚动时导航定位js代码如下：var $navs = $('na...
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...
vue-element-admin改造顶部一级导航，侧边二级导航
weixin_43180359的博客
05-19 1万+
本项目是基于vue-element-admin的基础模板vue-admin-template进行改造的，因为实际项目很多会用到顶部导航菜单和侧边导航相结合的情况，为了满足这种需求做了改造。 先上效果图： 改造过程： 目前业务较多，改造过程后期补上。 代码仓库地址： 我的码云仓库 ...
Vue简单实现-点击顶部导航栏动态改变左侧导航显示内容
qq_42589862的博客
06-01 1万+
说明： 1.不清楚这样写会不会影响性能，只是觉得这样比较简单 2.通过 兄弟组件传值 + v-if 实现 3.不改变页面地址 做出来的效果如下： 1.新建三个vue组件，其中Home是父组件，Header和BodyLeft是兄弟组件 2.在main.js中创建总线 let bus = new Vue() Vue.prototype.bus = bus 3.编写...
vue实现tabs侧边导航栏点击内容跳转到对应位置，且内容滚动导航栏切换，封装直接用
m0_64207574的博客
06-07 4254
vue实现tabs侧边导航栏点击内容跳转到对应位置，且内容滚动导航栏切换，封装直接用
Vue 实现导航栏滑到顶部固定，滑动到相应位置导航栏有相应选中效果，点击导航跳转到对应位置
yhl_nsd的博客
03-23 9969
主要思路 导航栏固定 判断页面卷曲是否大于导航栏的offsetTop的值，超过了就证明导航栏到达了顶部，给导航栏添加固定样式的类名，注意：需要拿到导航栏固定前的offsetTop值，固定后的offsetTop值为0，会导致页面需要卷曲值为0时，导航栏才复位，中间会有一段突兀的情况。 滑动到相应位置导航栏有对应选中样式 html结构 <div class="about"> <div class="banner"><div class="wrap">&lt
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值