方法一:监听滚动事件

$('.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. 开发必会系列:hibernate事务

    一  事务定义及特性 1.数据库事务的定义:数据库事务(Database Transaction) 是指由一个或多个SQL语句组成的工作单元,这个工作单元中的SQL语句相互依赖,如果有一个SQL语句执 ...

  2. 第145篇:js设计模式注册模式及相应实践

    好家伙,   0.索引  在阿里的低开项目中,使用这种形式去注册组件,我不禁好奇,这到底是个什么玩意 1.概念 在 JavaScript 中,注册模式(Registry Pattern)是一种设计模式 ...

  3. C# OpenCvSharp-HoughCircles(霍夫圆检测) 简单计数

    效果 项目 代码 using System; using System.Collections.Generic; using System.ComponentModel; using System.D ...

  4. linux学习指令与现有环境解决问题笔记

    linux学习指令与现有环境笔记 注意:我将pytorch和cuda安装在了pytorch这个虚拟环境中 pytorch安装及注意问题 注意版本对应,稳定版2.0.1对应cuda11.7,别按错了 按 ...

  5. 【已解决】Hadoop_07 Hadoop启动超时失败

  6. CF-937(D,E)

    CF-937 在补题-- D 分析 我们发现这些因子都是二进制形式的十进制数,n的范围是$1e5$,16的二进制是$10000$,于是可以枚举1~16,把这些因子预处理出来,对于每个n就枚举因子再作除 ...

  7. #交互,分类讨论#CF1292E Rin and The Unknown Flower

    题目传送门 分析 先尝试锁定一个字母,显然询问 \(CH,CO,CC\) 会比直接询问 \(C\) 更优,虽然牺牲了最后一个位置是否为 \(C\) 的查询. 同理,询问 \(HH,OH,CH\) 会比 ...

  8. #回滚莫队#AT1219 歴史の研究

    洛谷题目 AT1219 分析 不满足区间减性质的运算,如最值,就不能用普通莫队求, 考虑回滚莫队,它的核心思想就是若区间在块内直接暴力, 否则将右端点从小到大排序,右端点按普通莫队求,那么左端点由于只 ...

  9. OpenHarmony Meetup北京站招募令

    OpenHarmony Meetup城市巡回北京站火热来袭!!日期:2023年11月25日14:00地点:中国科学院软件园区五号楼B402与OpenHarmony技术大咖近距离互动,分享技术见解,结交 ...

  10. OpenHarmony技术日全面解读3.1 Release版本,系统基础能力再升级

    4 月 25 日,OpenAtom OpenHarmony(以下简称"OpenHarmony")技术日在深圳举办,对 OpenHarmony 3.1 Release 版本核心技术进 ...