@阿乐今天敲代码没

效果图

好几天没更新了，做一个小demo吧。导航栏吸顶，以及随页面滚动实现渐变色

吸顶前：

吸顶后：

滚动渐变色：

一、实现

html：

   <div class="nav" :class="navBarFixed == true ? 'navBarWrap' :''" :style="style">

Vue中data内容：

data() {return {navBarFixed: false,style: {},opacity: 0,}}

Vue中方法

 methods: {watchScroll() {//滚动距离var scrollTop =window.pageYOffset ||document.documentElement.scrollTop ||document.body.scrollTop;//  当导航栏滚动距离大于头部图片高度实现吸顶效果if (scrollTop > 799 ) {//为导航栏加上navBarFixed类，实现透明度随滚动改变，并且吸顶改变导航栏样式this.navBarFixed = true;this.opacity = Math.abs(Math.round(scrollTop)) / 3300;this.style = {background: `linear-gradient(to right,green,rgba(26, 212, 115,${this.opacity})`}  } else {this.navBarFixed = false;this.style='';}},

添加监听事件，监听滚动距离

 mounted() {window.addEventListener("scroll", this.watchScroll);},

记得跳转页面销毁监听事件，否则会影响其他页面

 beforeRouteLeave(to, from, next) {window.removeEventListener('scroll', this.watchScroll);next();},

Vue导航栏吸顶及滚动渐变色相关推荐

导航栏吸顶 vs 滚动定位
需求描述: 实现导航滚动过banner之后吸顶,点击导航后定位到对应模块,滚动到对应模块后导航对应区域实现高亮效果~~~ html+css+js swiper+jq 使用html+swiper实现页面 ...
Vue实现导航栏吸顶效果
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" ...
uniApp 适配问题自定义头部导航栏/吸顶距离适配
//获取微信小程序胶囊位置和参数 V_Proto.$getCap = function(){//#ifdef MP-WEIXIN//只有在微信小程序才执行let cap = uni.getMenuBu ...
监听滚动条事件来实现导航栏吸顶效果
首先要实现监听滚动条的位置: (1)在mounted钩子函数中随便定义一个方法来获取滚动条变化: window.addEventListener('scroll', this.handleScroll ...
vue实现头部吸顶描点
vue实现头部吸顶描点效果:页面滚到具体位置时,顶部吸附(粘性定位),点击描点跳转到对应位置,滚到到对应位置描点自动切换. html:使用elment ui,name对应每个位置的ref名称, &l ...
随着滚动条下拉，导航栏置顶
随着滚动条下拉,导航栏置顶想做一个这样的效果,当我们下拉滚动条时,写的导航栏置顶. 这是效果图先学习用到的基本知识 jQuery CSS 操作 - scrollTop() 方法 scrollTop ...
写了个移动端可滑动（惯性滑动回弹）Vue导航栏组件 ly-tab
前段时间写了一个移动端的自适应滑动Vue导航栏组件,觉得有一定实用性,大家可能会用得到(当然有些大佬自己写得更好的话就没必要啦),于是前两天整理了一下,目前已经发布到npm和GitHub上了,点我到n ...
vue导航栏滑动切换居中，导航栏超出部分可以滑动，点击触发滑动对应的index，且滑动时导航栏会自动对应
效果图模仿婚礼纪电子请帖模块导航栏超出部分可以滑动,点击触发滑动对应的index,且滑动时导航栏会自动对应 Html部分 <template><div class=" ...
微信小程序导航头部吸顶效果
功能描述:当页面滚动到该元素的时候,变成固定的导航头部,也就是固定在最上面,当往回滑动时又变成原来的样子. 基本原理是: 1.获取要吸顶元素到页面顶部的高度 2.监听页面已经滚动的高度 3.将要吸顶元 ...

Vue导航栏吸顶及滚动渐变色

效果图

一、实现

Vue导航栏吸顶及滚动渐变色相关推荐

最新文章

热门文章