方法一:监听滚动事件

$('.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. 优化Mysql配置调整内存

    1.查看Mysql版本 # mysql -V 示例: [root@root /]# mysql -V mysql Ver 14.14 Distrib 5.7.44, for Linux (x86_64 ...

  2. 开发必会系列:《spring实战(第4版)》读书笔记

    一  spring的核心 1.主要概念 DI能够让相互协作的软件组件保持松散耦合,而面向切面编程(AOP)允许你把遍布应用各处的功能分离出来形成可重用的组件. spring有两类容器实现方式,bean ...

  3. 工具推荐--DRAWIO流程图软件

    简介 DRAWIO是一款开源的流程图软件,可以快速绘制各种流程图,支持图形导入和图像插入,且可以类似excel一样分页,能够以最简介的方式实现最复杂的功能; 基础功能 作为一款流程图软件,绘制流程图的 ...

  4. verilog之function

    verilog之function 1.基本作用 function,就是声明一个函数.与task的区别就是有参数.function的返回值就是函数名(可以设置位宽),输入值任意,均作为输入参数.代码块需 ...

  5. SQL 递归核心思想(递归思维)

    目前很缺递归思维,主要是算法代码写得少,本篇记录下以 PostgreSQL 代码举例(主要是非常喜欢这款性能小钢炮数据库). 树状查询不多说,很简单大家基本都会,主要讲 cte 代码递归实现不同需求. ...

  6. #二叉堆#JZOJ 4320 旅行

    分析 有一个很重要的性质就是如果经过道路数为奇数,把两个点到根节点的路径长加起来就是两个点间的路径长(正负消掉了) 而且众所周知的是奇数+偶数=奇数 可以预处理每个点到根节点的路径长度(按照题目要求) ...

  7. OpenHarmony Meetup 深圳站招募令

      OpenHarmony Meetup城市巡回深圳站火热来袭!! 日期:2023年10月15日14:00 地点:深圳市福田区上步路中路1003号 深圳市科学馆 与OpenHarmony技术大咖近距离 ...

  8. OpenHarmony littlefs文件系统存储结构与IO性能优化分析

    引言 随着科技的发展和网络技术的进步,计算机存储空间愈加紧张,存储空间对文件系统的功能需求越来越大,大规模的数据增长为文件存储.非结构化数据存储提出了新的挑战. 对于许多物联网设备而言,拥有一个小型且 ...

  9. [AHOI2014/JSOI2014/一本通1722]骑士游戏 题解 (spfa做dp)

    题目描述 在游戏中,JYY一共有两种攻击方式,一种是普通攻击,一种是法术攻击.两种攻击方式都会消耗JYY一些体力.采用普通攻击进攻怪兽并不能把怪兽彻底杀死,怪兽的尸体可以变出其他一些新的怪兽,注意一个 ...

  10. C# 面向对象编程解析:优势、类和对象、类成员详解

    C# - 什么是面向对象编程? OOP代表面向对象编程. 过程式编程涉及编写执行数据操作的过程或方法,而面向对象编程涉及创建包含数据和方法的对象. 面向对象编程相对于过程式编程具有几个优势: OOP执 ...