1. vue中滚动页面,改变样式&&导航栏滚动时,样式透明度修改
    .vue
  1. <div class="commonHeader" v-bind:class="{ 'navActive': scrollFlag }">
  1. <img src="@/images/home/icon_jdjr.png" v-bind:class="{ 'scrollFlag': scrollFlag }">
  1. data
    scrollFlag:false,
  1. mounted
    window.addEventListener('scroll', this.handleScroll)
  1. 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. C# QRCode 二维码

    /*********************************************************************** * C# QRCode 二维码 * 说明: * 本文记 ...

  2. 我的第一篇博文,Python+scrapy框架安装。

    自己用Python脚本写爬虫有一段时日了,也抓了不少网页,有的网页信息两多,一个脚本用exe跑了两个多月,数据还在进行中.但是总觉得这样抓效率有点低,问题也是多多的,很早就知道了这个框架好用,今天终于 ...

  3. python中coding:utf-8和setdefaultencoding区别

    这两个作用不一样, 1. # coding:utf-8 作用是定义源代码的编码. 如果没有定义, 此源码中是不可以包含中文字符串的.PEP 0263 -- Defining Python Source ...

  4. char-rnn-tensorflow源码解析及结构流程分析

    char-rnn-tensorflow由飞飞弟子karpathy编写,展示了如何用tensorflow来搭建一个基本的RNN(LSTM)网络,并进行基于char的seq2seq进行训练. 数据读取部分 ...

  5. C++实现从尾到头打印链表(不改变链表结构)

    /* * 从尾到头打印链表.cpp * * Created on: 2018年4月7日 * Author: soyo */ #include<iostream> #include<s ...

  6. Java多线程系列八——volatile和ThreadLocal

    参考资料: http://ifeve.com/java-memory-model-4/ http://www.infoq.com/cn/articles/java-memory-model-1 htt ...

  7. json知识笔记

    1.全称:JavaScript  Object Notation 2.数据格式 3. 数据结构-object String+基本类型(或者数据结构) 数据结构-Array [基本类型] 4.一个样例a ...

  8. bzoj 1951: [Sdoi2010]古代猪文 【中国剩余定理+欧拉定理+组合数学+卢卡斯定理】

    首先化简,题目要求的是 \[ G^{\sum_{i|n}C_{n}^{i}}\%p \] 对于乘方形式快速幂就行了,因为p是质数,所以可以用欧拉定理 \[ G^{\sum_{i|n}C_{n}^{i} ...

  9. 异或+构造 HDOJ 5416 CRB and Tree

    题目传送门 题意:给一棵树,问f (u, v) 意思是u到v的所有路径的边权值的异或和,问f (u, v) == s 的u,v有几对 异或+构造:首先计算f (1, u) 的值,那么f (u, v) ...

  10. 贪心 UVALive 6834 Shopping

    题目传送门 /* 题意:有n个商店排成一条直线,有一些商店有先后顺序,问从0出发走到n+1最少的步数 贪心:对于区间被覆盖的点只进行一次计算,还有那些要往回走的区间步数*2,再加上原来最少要走n+1步 ...