方法一:监听滚动事件

$('.scrollContent').bind('touchmove', function(e){
            var  winHeight = $(window).scrollTop()
            document.getElementById('opacityHeader').style.opacity=winHeight*0.01   
            document.getElementById('centerBg').style.opacity=1-winHeight*0.01   
        })
方法二：使用van-tab的scroll事件
van-tabs标签内添加
@scroll='scroll'
methods内：
scroll(){
        // debugger
        let winHeight = $(window).scrollTop()
        console.log(winHeight)
        document.getElementById('渐变色div的id').style.opacity=winHeight*0.01 
      },

van-tab吸顶后头部透明色渐变响应的更多相关文章

  1. 自定义tab吸顶效果一（原理）

    PS:问题:什么是吸顶,吸顶有什么作用,吸顶怎么使用? 在很多app商城中,介绍软件的时候就会使用吸顶效果, 吸顶有很多作用,一个最简单粗暴的作用就是,让用户知道此刻在浏览哪个模块,并可以选择另外的模 ...

  2. react.js中实现tab吸顶效果问题

    在react项目开发中有一个需求是,页面滚动到tab所在位置时,tab要固定在顶部. 实现的思路其实很简单,就是判断当滚动距离scrollTop大于tab距离页面顶部距离offsetTop时,将tab ...

  3. tab吸顶的神奇-- css粘性属性

    position: -webkit-sticky; position: sticky; top: 0.86rem; //可以自定义设置大小 亲测,目前谷歌浏览器等都已经支持该属性.

  4. Vue开发——实现吸顶效果

    因为项目需求,最近开始转到微信公众号开发,接触到了Vue框架,这个效果的实现虽说是基于Vue框架下实现的,但是同样也可以借鉴到其他地方,原理都是一样的. 进入正题,先看下效果图: 其实js做这个效果还 ...

  5. 微信小程序吸顶功能

    ---------------------------HTML------------------------ <view class="navbar-wrap">  ...

  6. [RN] React Native 头部 滑动吸顶效果的实现

    React Native 头部 滑动吸顶效果的实现 效果如下图所示: 实现方法: 一.吸顶组件封装 StickyHeader .js import * as React from 'react'; i ...

  7. Vue 事件监听实现导航栏吸顶效果（页面滚动后定位）

    Vue 事件监听实现导航栏吸顶效果(页面滚动后定位) Howie126313 关注 2017.11.19 15:05* 字数 100 阅读 3154评论 0喜欢 0 所说的吸顶效果就是在页面没有滑动之 ...

  8. 吸顶大法 -- UWP中的工具栏吸顶的实现方式之一

    如果一个页面中有很长的列表/内容,很多应用都会在用户向下滚动时隐藏页面的头,给用户留出更多的阅读空间,同时提供一个方便的吸顶工具栏,比如淘宝中的店铺页面. 下面是一个比较简单的实现,如果有同学有更好的 ...

  9. React制作吸顶功能总结

    总结一下最近用react写项目时,遇到的一些坑,恩,真的还蛮坑的,主要是设置状态的时候特别不好控制,下面我们一起来看下,这里自己做了几个demo,分别看下, 主页面代码如下: class Head e ...

  10. UWP中使用Composition API实现吸顶（2）

    在上一篇中我们讨论了不涉及Pivot的吸顶操作,但是一般来说,吸顶的部分都是Pivot的Header,所以在此我们将讨论关于Pivot多个Item关联同一个Header的情况. 老样子,先做一个简单的 ...

随机推荐

  1. C#(winform)自定义ListItem类方便ComboBox操作

    public class ListItem { /// <summary> /// Key /// </summary> public string Key { get; se ...

  2. 关于FTP文件传输协议说明，带你了解更详情的文件传输协议

    Internet和其他网络上的人与设备之间的通信使用协议进行.您可以说协议定义了对话规则:谁必须在何时发送哪些信息?如果数据没有到达接收者,会发生什么?您如何保护转帐免受错误和犯规?每当我们使用Int ...

  3. ArrayList扩容代码分析

    ArrayList扩容机制是在面试中频繁出现的问题,平时了解的比较含糊,特此记录! 注意:每次发生扩容,其容量扩充为原来的1.5倍左右 add方法 public boolean add(E e) { ...

  4. KingbaseES 数据库逻辑优化规则

    SQL 优化的过程可以分为逻辑优化和物理优化两个部分.逻辑优化主要是基于规则的优化,简称 RBO(Rule-Based Optimization).物理优化会为逻辑查询计划中的算子选择某个具体的实现, ...

  5. Lab1:Xv6 and Unix utilities

    Sleep功能 通过接受时间参数,调用system_call 指令 sleep实现该功能 #include "kernel/types.h" #include "kern ...

  6. Notion笔记汉化

    Notion笔记汉化 参考:https://github.com/Reamd7/notion-zh_CN 关注我的订阅号[靠谱杨阅读人生]回复[Notion]获取中文包 1.进入notion的安装路径 ...

  7. 大数据hadoop Linux 相关常用命令行操作

    bin/zkServer.sh start bin/zkServer.sh stop 启动Hadoop 1 hadoop102 sbin/start-dfs.sh 2 hadoop103 sbin/s ...

  8. GraphQl in ASP.NET Core

    GraphQl in ASP.NET Core https://graphql.cn/ https://graphql-dotnet.github.io/docs/getting-started/ar ...

  9. #树状数组#CF461C Appleman and a Sheet of Paper

    题目传送门 分析 可以发现往左翻太多相当于往右翻一点,所以如果翻的位置超过一半那么打一个取反标记再另一边翻转, 用树状数组维护当前厚度,时间复杂度 \(O(n\log^2 n)\) 代码 #inclu ...

  10. #cdq分治，树状数组#洛谷 5459 [BJOI2016]回转寿司

    题目 求 \[\sum_{i=1}^n\sum_{j=i}^{n}[L\leq \sum_{k=i}^j a_k\leq R] \] 分析(树状数组) 考虑前缀和,改为是否有两个数的差在\([L\si ...