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. Robotframework之Run Keyword And Return Status和Run Keyword

    今天在android项目中遇到一个问题,场景达人每天第一次接单时,会弹出提示框:每日完成订单配送后将扣取1元保险费,是否确认接单?,点击确定后,才能接单成功,并且只有每天第一次接单才会弹出 如下图 此 ...

  2. bzoj3251

    3251: 树上三角形 Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 637  Solved: 262[Submit][Status][Discuss ...

  3. HDU 4891 The Great Pan (题意题+模拟)

    题意:给定一个文章,问你有多少种读法,计算方法有两种,如果在$中,如果有多个空格就算n+1,如果是一个就算2的次方,如果在{}中, 那么就是把每个空格数乘起来. 析:直接模拟,每次计算一行,注意上一行 ...

  4. Gym 100531A Alarm Clock (水题)

    题意:给定一个被高亮的数,问你是不是有个时间恰好高亮是这个数. 析:直接暴力,直接暴力,枚举每一位时间,当然也可以枚举时间,能找到就是有,找不到就算了. 代码如下: #pragma comment(l ...

  5. 安装MySQL需要注意的事项

    一.安装MySQL之后,怎样启动MySQL,以及登录.查看数据库操作? 用管理员身份运行cmd或power shell 二.当然有可能会出现不能在cmd或power shell中登录数据库账户 造成这 ...

  6. JavaScript 数组相关基础方法

    文章来源于:https://www.cnblogs.com/dolphinX/p/3353590.html 创建数组 构造函数 1.无参构造函数,创建一空数组 var a1=new Array(); ...

  7. 洛谷P4141消失之物(背包经典题)——Chemist

    题目地址:https://www.luogu.org/problemnew/show/P4141 分析:这题当然可以直接暴力枚举去掉哪一个物品,然后每次暴力跑一遍背包,时间复杂度为O(m*n^2),显 ...

  8. bzoj2581 [USACO 2012 Jan Gold] Cow Run【And-Or Tree】

    传送门1:http://www.usaco.org/index.php?page=viewproblem2&cpid=110 传送门2:http://www.lydsy.com/JudgeOn ...

  9. 持有对方的引用&&内部类

    现在来做个很简单的东西,就是做一个做加法的图形界面 然后现在先是一个不用持有对方引用的写法: import java.awt.*; import java.awt.event.*; public cl ...

  10. YUM报错及解决办法

    [root@xuegod60 ~]# yum clean all Loaded plugins: product-id, refresh-packagekit, security, subscript ...