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 ...
随机推荐
- mac系统下命令编译android ndk项目
1.设置ndk环境变量 2.构造android ndk项目,命令:ndk-build 3.使用ant构造android sdk项目:命令:android update project -p . -n ...
- 【OpenFOAM】——OpenFOAM入门算例学习
1 明确目标——为啥费老大劲儿学习OpenFOAM 学习OpenFOAM主要出于课题需要,希望实现以下几个目标: l [ ]学会用SnappyHexMesh生成高质量网格: l [ ]学习使用O ...
- 三步升级已安装的 Android SDK 和 ADT 插件(转载)
转载:http://www.tfan.org/update-adt-and-android-sdk-in-five-minutes/ 如何快速地把已安装的 Android SDK 及 Eclipse ...
- poj 1815 Friendship【最小割】
网络流的题总是出各种奇怪的错啊--没写过邻接表版的dinic,然后bfs扫到t点不直接return 1就会TTTTTLE-- 题目中的操作是"去掉人",很容易想到拆点,套路一般是( ...
- 安装 Apache Commons Logging API步骤
下载地址: http://commons.apache.org/logging/
- _bzoj1012 [JSOI2008]最大数maxnumber【Fenwick Tree】
传送门:http://www.lydsy.com/JudgeOnline/problem.php?id=1012 裸的树状数组. #include <cstdio> #include &l ...
- ASP.NET CORE 使用 EF CORE访问数据库
asp.net core通过ef core来访问数据库,这里用的是代码优先,通过迁移来同步数据库与模型. 环境:vs2017,win10,asp.net core 2.1 一.从建立asp.net c ...
- Java中的流(2)字节流-InputStream和OutputStream
字节流的两个顶层类是抽象类:InputStream和OutputStream 1. OutputStream void write(int b) 往流中写一个字节b void write(byte b ...
- html 测试
斯蒂芬斯蒂芬 20:23你过来吧,我们好好谈一谈 好好学习 21:22这是一个无法避免的错误 作为一个新手,我在学习HTML文件的格式,我觉得博客园的编辑器很棒, 查看这些源代码让我学习到了许多知识. ...
- 转】在Ubuntu中安装Redis
不多说,直接上干货! 原博文出自于: http://blog.fens.me/category/%E6%95%B0%E6%8D%AE%E5%BA%93/ 感谢! 在Ubuntu中安装Redis R利剑 ...