vue中滚动页面,改变样式&&导航栏滚动时,样式透明度修改
vue中滚动页面,改变样式&&导航栏滚动时,样式透明度修改
.vue
<div class="commonHeader" v-bind:class="{ 'navActive': scrollFlag }">
<img src="@/images/home/icon_jdjr.png" v-bind:class="{ 'scrollFlag': scrollFlag }">
data
scrollFlag:false,
mounted
window.addEventListener('scroll', this.handleScroll)
methods
handleScroll () {
let _this=this;
var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
// console.log(scrollTop)
if(scrollTop){
_this.scrollFlag=true
}else{
_this.scrollFlag=false
}
}
vue中滚动页面,改变样式&&导航栏滚动时,样式透明度修改的更多相关文章
- 在mui中遇到的内容覆盖导航栏的问题
一.问题描述: 公司项目中为了让内容以页面的形式显示,并要格式化页面内容,采用了百度的UEditor编辑器来显示内容,但是遇到了一个问题就是当下拉页面到一定距离之后,页面上方的导航栏会被内容遮盖. 二 ...
- 前端 ---- js 模拟百度导航栏滚动案例
模拟百度导航栏滚动监听 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta chars ...
- vue中在页面渲染完之后获取元素(否则动态渲染的元素获取不到)
两种方法: 方法一: 使用$nextTick,在异步获得数据之后再获取元素: 方法二: 在then之后再获取该元素: 问题2:vue中监听改变数组的方法: let idx =; this.listIn ...
- 黑马vue---16、vue中通过属性绑定为元素设置class类样式
黑马vue---16.vue中通过属性绑定为元素设置class类样式 一.总结 一句话总结: 这里就是为元素绑定class样式,和后面的style样式区别一下 vue中class样式绑定方式的相对于原 ...
- vue+el-menu实现路由刷新和导航栏菜单状态保持(局部刷新页面)
一.菜单项激活状态保持 有时,我们在项目中会有这样一个需求,即实现 一个侧导航栏,点击不同的菜单项,右边内容会跟着变化,而页面手动刷新后想要使菜单激活状态保持,那么这个功能该如何实现呢? 现在给出以下 ...
- bootstrap如何去除自带的样式----导航栏中的菜单实现平滑的过渡到对应的菜单区域-------动态跟换模态框中的内容
问题1:如何去除bootstap中css中自带的overflow:hidden这个样式 今天遇见在bootstap中轮播图上的 附带图 片不能够显示出来,图片始终有一部分的高度 被隐藏了 后来通 ...
- vue中判断页面滚动开始和结束
参考链接:https://www.jianshu.com/p/adad39705ced 和 https://blog.csdn.net/weixin_44309374/article/deta ...
- 在CSS中定义【导航栏】超链接样式
1.案例css代码 <style> .divcss5 a:link{ color:#F00}/* 链接默认为红色 */ .divcss5 a:hover{ color:#000}/* 鼠标 ...
- vue中的页面渲染方案
一.模板渲染 <div id="J_render_app"> <ul v-if="items.length"> <li v-for ...
随机推荐
- [USACO 2017DEC] Greedy Gift Takers
[题目链接] https://www.lydsy.com/JudgeOnline/problem.php?id=5139 [算法] 二分答案 时间复杂度 : O(NlogN^2) [代码] #incl ...
- Python3字符串方法
Python字符串方法图示: 1.index() 重点 定义:查找并返回指定str的索引位置,如果没找到则会抛异常(查找的顺序是从左至右)可以指定范围:开始位置和结束位置进行查找. 格式:“字符串内容 ...
- 杂项-Java-百科:jar
ylbtech-杂项-Java-百科:jar 在软件领域,JAR文件(Java归档,英语:Java ARchive)是一种软件包文件格式,通常用于聚合大量的Java类文件.相关的元数据和资源(文本.图 ...
- "cannot be resolved or is not a field"问题解决 (转载)
转自:http://blog.csdn.net/liranke/article/details/16803295 在修改了资源文件后,出现“"cannot be resolved or is ...
- bzoj 3218: a + b Problem【主席树+最小割】
直接建图比较显然,是(s,i,w),(i,t,b),(i,i',p),(i,j,inf),然而建出来之后发现边数是n方级别的,显然跑不过去,然后就有一种比较神的思路:把a离散了建一棵权值线段树,然后要 ...
- python开发基础教程
第一:python基础 第二:python异常处理类 第三:python装饰器 python常用的装饰器 第四:python发送邮件
- Linux命令-自动挂载文件/etc/fstab功能详解
Linux命令-自动挂载文件etcfstab功能详解 一./etc/fstab文件的作用 磁盘被手动挂载之后都必须把挂载信息写入/etc/fstab这个文件中,否则下次开机启动时仍然需要重新挂载. 系 ...
- 数据结构 - 动态单链表的实行(C语言)
动态单链表的实现 1 单链表存储结构代码描述 若链表没有头结点,则头指针是指向第一个结点的指针. 若链表有头结点,则头指针是指向头结点的指针. 空链表的示意图: 带有头结点的单链表: 不带头结点的单链 ...
- hdu 2121 Ice_cream’s world II (无定根最小树形图)
题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=2121 题目大意: 有n个点,有m条单向路,问这n个点组成最小树形图的最小花费. 解题思路: 1:构造 ...
- DFS和BFS模板
DFS: 该DFS框架以2D坐标范围为例,来体现DFS算法的实现思想 #include<cstdio> #include<cstring> #include<cstdli ...