方法一:监听滚动事件

$('.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. 不用写一行代码!Python最强自动化神器!

    1.Playwright介绍 Playwright是一个由Microsoft开发的开源自动化测试工具,它可以用于测试Web应用程序.Playwright支持多种浏览器,包括Chrome.Firefox ...

  2. oracle_fdw扩展使用中异常问题

    Oracle_fdw 的使用介绍已经在之前的文章中介绍过了,具体见:https://www.cnblogs.com/kingbase/p/14846479.html. 本篇文章介绍一下可能碰到的问题处 ...

  3. 基于rk3588----i2c驱动框架学习(2)-总线驱动 algorithm 分析

    rk3588 i2c algorithm 分析 来了来了,上次分析完i2c的驱动框架 今天我们就看看i2c的algorithm是如何实现的 static const struct i2c_algori ...

  4. 实例演示如何使用CCE XGPU虚拟化

    本文分享自华为云社区<CCE XGPU虚拟化的使用>,作者: 可以交个朋友. 一 背景 在互联网场景中,用户的AI训练和推理任务对GPU虚拟化有着强烈的诉求.GPU卡作为重要的计算资源不管 ...

  5. Refresh Clean Code

    这是一本被前辈称赞, 另一个马丁的知名著作, 被赋予学习如何写出漂亮代码的教皇级手册, 最近(再)浏览, 有诸多感受. 总结一下就是如果你是新手, 可能看优秀的open source学习更好; 如果你 ...

  6. 基于ArkUI框架开发——图片模糊处理的实现

     原文:https://mp.weixin.qq.com/s/vwXVj5vmAxDRG_jTk_8hPA,点击链接查看更多技术内容. 现在市面上有很多APP,都或多或少对图片有模糊上的设计,所以,图 ...

  7. XML 简介及用法详解

    XML 是一种用于存储和传输数据的与软件和硬件无关的工具. 什么是XML? XML代表eXtensible Markup Language(可扩展标记语言).XML是一种与HTML非常相似的标记语言. ...

  8. c# 托管和非托管资源-详解

    前言 引用:带你复习c# 托管和非托管资源_C#教程_脚本之家 (jb51.net) c# 托管和非托管比较重要,因为这涉及到资源的释放. 现在只要在计算机上运行的,无论玩出什么花来,整个什么概念,逃 ...

  9. 【郑州轻工业大学】HarmonyOS宠物健康系统的开发分享

    原文:https://mp.weixin.qq.com/s/upcS6PcMS7UBR5jgoP7eow,点击链接查看更多技术内容. 本期我们给大家带来的是家庭宠物健康监测系统开发者杨光的分享,希望能 ...

  10. 树模型-C4.5

    C4.5: ID3的改进版本 首先,C4.5和ID3一样都是多叉树,重点是连续特征处理+特征选择的方式不同. ID3算法存在的不足, 在C4.5里面有了改进 有那些改进 不能处理连续特征的问题 C4. ...