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中滚动页面,改变样式&&导航栏滚动时,样式透明度修改的更多相关文章

  1. 在mui中遇到的内容覆盖导航栏的问题

    一.问题描述: 公司项目中为了让内容以页面的形式显示,并要格式化页面内容,采用了百度的UEditor编辑器来显示内容,但是遇到了一个问题就是当下拉页面到一定距离之后,页面上方的导航栏会被内容遮盖. 二 ...

  2. 前端 ---- js 模拟百度导航栏滚动案例

    模拟百度导航栏滚动监听 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta chars ...

  3. vue中在页面渲染完之后获取元素(否则动态渲染的元素获取不到)

    两种方法: 方法一: 使用$nextTick,在异步获得数据之后再获取元素: 方法二: 在then之后再获取该元素: 问题2:vue中监听改变数组的方法: let idx =; this.listIn ...

  4. 黑马vue---16、vue中通过属性绑定为元素设置class类样式

    黑马vue---16.vue中通过属性绑定为元素设置class类样式 一.总结 一句话总结: 这里就是为元素绑定class样式,和后面的style样式区别一下 vue中class样式绑定方式的相对于原 ...

  5. vue+el-menu实现路由刷新和导航栏菜单状态保持(局部刷新页面)

    一.菜单项激活状态保持 有时,我们在项目中会有这样一个需求,即实现 一个侧导航栏,点击不同的菜单项,右边内容会跟着变化,而页面手动刷新后想要使菜单激活状态保持,那么这个功能该如何实现呢? 现在给出以下 ...

  6. bootstrap如何去除自带的样式----导航栏中的菜单实现平滑的过渡到对应的菜单区域-------动态跟换模态框中的内容

    问题1:如何去除bootstap中css中自带的overflow:hidden这个样式 今天遇见在bootstap中轮播图上的  附带图  片不能够显示出来,图片始终有一部分的高度  被隐藏了 后来通 ...

  7. vue中判断页面滚动开始和结束

    参考链接:https://www.jianshu.com/p/adad39705ced    和  https://blog.csdn.net/weixin_44309374/article/deta ...

  8. 在CSS中定义【导航栏】超链接样式

    1.案例css代码 <style> .divcss5 a:link{ color:#F00}/* 链接默认为红色 */ .divcss5 a:hover{ color:#000}/* 鼠标 ...

  9. vue中的页面渲染方案

    一.模板渲染 <div id="J_render_app"> <ul v-if="items.length"> <li v-for ...

随机推荐

  1. I.MX6 mkuserimg.sh 使用

    /*********************************************************************** * I.MX6 mkuserimg.sh 使用 * 说 ...

  2. hdu 2553(N皇后问题)

    N皇后问题 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submi ...

  3. linux设备驱动第三篇:如何写一个简单的字符设备驱动?

    在linux设备驱动第一篇:设备驱动程序简介中简单介绍了字符驱动,本篇简单介绍如何写一个简单的字符设备驱动.本篇借鉴LDD中的源码,实现一个与硬件设备无关的字符设备驱动,仅仅操作从内核中分配的一些内存 ...

  4. Linux系统调用之open(), close() (转载)

    转自:http://joe.is-programmer.com/posts/17463.html open函数可以打开或创建一个文件. #include <sys/types.h> #in ...

  5. bzoj 3677: [Apio2014]连珠线【树形dp】

    参考:http://www.cnblogs.com/mmlz/p/4456547.html 枚举根,然后做树形dp,设f[i][1]为i是蓝线中点(蓝线一定是父子孙三代),f[i][0]为不是,转移很 ...

  6. 部分安卓微信浏览器无法触发onchange事件

    这是安卓微信的一个遗留问题. 解决办法很简单: 将input标签 <input type=“file" name="image" accept="imag ...

  7. Luogu P1140 相似基因 【dp】By cellur925

    最近博客更不起来...然后又(照例)犯鼻炎了唉难受. 题目传送门 我们首先可以预处理碱基间的权值表.然后讲读入的碱基转化为数字,就变成了“数字匹配使权值最大”的问题.我们显然可以用动态规划解决. 两个 ...

  8. Django 源码安装及使用

    首先我们使用的是最新版的CentOS系统:CentOS 7.4 在安装django之前,我们首先保证系统中已经安装好setuptools Django安装: 1.首先我们在Django官网下载最新版本 ...

  9. 数论(GCD) HDOJ 4320 Arcane Numbers 1

    题目传送门 题意:有一个A进制的有限小数,问能否转换成B进制的有限小数 分析:0.123在A进制下表示成:1/A + 2/(A^2) + 3 / (A^3),转换成B进制就是不断的乘B直到为0,即(1 ...

  10. 468 Validate IP Address 验证IP地址

    详见:https://leetcode.com/problems/validate-ip-address/description/ Java实现: class Solution { public St ...