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. LOJ114_k 大异或和_线性基

    LOJ114_k 大异或和_线性基 先一个一个插入到线性基中,然后高斯消元. 求第K小就是对K的每一位是1的都用对应的线性基的一行异或起来即可. 但是线性基不包含0的情况,因此不能确定能否组成0,需要 ...

  2. 【HAOI 2007】 上升序列

    [题目链接] 点击打开链接 [算法] 先预处理 : 将序列反转,求最长下降子序列 对于每个询问,根据字典序性质,贪心即可 [代码] #include<bits/stdc++.h> usin ...

  3. asp.net MVC5 中的捆绑和更改bootstap默认的样式

    在MVC5的视图中使用@Scritps.Render(),@Styles.Render() 分别可以加载样式和脚本.捆绑的和实际的路径都可以. 并且可以利用 编程的方式灵活引用css文件和脚本文件. ...

  4. 【转载】CAS操作

    [本文转载]http://blog.csdn.net/hsuxu/article/details/9467651 CAS CAS:Compare and Swap, 翻译成比较并交换. java.ut ...

  5. 初窥MySQL性能调优

    本文涉及:MySQL自带的性能测试工具mysqlslap的使用及几个性能调优的方法 性能测试工具—mysqlslap mysqlslap是MySQL自带的一款非常优秀的性能测试工具.使用它可以 模拟多 ...

  6. Quartz.Net实现的定时执行任务调度

    在之前的文章<推荐一个简单.轻量.功能非常强大的C#/ASP.NET定时任务执行管理器组件–FluentScheduler>和<简单.轻量.功能非常强大的C#/ASP.NET定时调度 ...

  7. The Fewest Coins POJ - 3260

    The Fewest Coins POJ - 3260 完全背包+多重背包.基本思路是先通过背包分开求出"付出"指定数量钱和"找"指定数量钱时用的硬币数量最小值 ...

  8. 数学/找规律/暴力 Codeforces Round #306 (Div. 2) C. Divisibility by Eight

    题目传送门 /* 数学/暴力:只要一个数的最后三位能被8整除,那么它就是答案:用到sprintf把数字转移成字符读入 */ #include <cstdio> #include <a ...

  9. Linux环境下SolrCloud集群环境搭建关键步骤

    Linux环境下SolrCloud集群环境搭建关键步骤. 前提条件:已经完成ZooKeeper集群环境搭建. 一.下载介质 官网下载地址:http://www.apache.org/dyn/close ...

  10. sdut1282Find the Path (floyd变形)

    http://acm.sdut.edu.cn/sdutoj/problem.php?action=showproblem&problemid=1282 感觉这题就比较有意思了 ,虽说是看了别人 ...