<van-nav-bar fixed id="opacityHeader"      //拉伸状态显示的header
        title="赛事"
        left-arrow
        color=''
      />
      <van-nav-bar fixed id="notreal"        //未拉伸状态显示的header 
        title="赛事"
        left-arrow
        color=''
      />
js:
scroll(){
          // debugger
          let winHeight = $(window).scrollTop()
          document.getElementById('opacityHeader').style.opacity=winHeight*0.01 
        },
css:
#notreal{
  background: none!important
}
.van-nav-bar{
    background: #4e8eff;
    color: white;
  }

升级版header吸顶后滑动变色(二)的更多相关文章

  1. 微信小程序吸顶功能

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

  2. react 吸顶实现

    今天获取到一个需求,其实就是吸顶的需求,页面下滑,某一块dom隐藏时发生吸顶现象.这种特效其实老生常谈了,但是在这次做的时候,突发奇想,能否将其做成一个 hook ,从而实现出传递ref即可使得 do ...

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

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

  4. Vue 事件监听实现导航栏吸顶效果(页面滚动后定位)

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

  5. vue滑动吸顶以及锚点定位

    Vue项目中需要实现滑动吸顶以及锚点定位功能.template代码如下: <template> <div class="main"> <div id= ...

  6. UWP中使用Composition API实现吸顶(2)

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

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

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

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

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

  9. React制作吸顶功能总结

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

  10. UWP中使用Composition API实现吸顶(1)

    前几天需要在UWP中实现吸顶,就在网上找了一些文章: 吸顶大法 -- UWP中的工具栏吸顶的实现方式之一 在UWP中页面滑动导航栏置顶 发现前人的实现方式大多是控制ListViewBase的Heade ...

随机推荐

  1. 一些 IL 语言解释

    跳转指令集合 Public field Static     Beq     如果两个值相等,则将控制转移到目标指令. Public field Static     Beq_S     如果两个值相 ...

  2. 自定义AXI总线IP之补全寄存器的输入输出配置

    自定义AXI总线IP之补全寄存器配置输入和输出 1.实验目的 在使用默认的AXI4的配置时,不会有寄存器的配置,无法配置端口的输入还是输出.根据前面的AXI总线的理解,这里通过仲裁器判断,将AXI4的 ...

  3. Dynamic ReLU:微软推出提点神器,可能是最好的ReLU改进 | ECCV 2020

    论文提出了动态ReLU,能够根据输入动态地调整对应的分段激活函数,与ReLU及其变种对比,仅需额外的少量计算即可带来大幅的性能提升,能无缝嵌入到当前的主流模型中   来源:晓飞的算法工程笔记 公众号 ...

  4. 化腐朽为神奇的QueryMapping

    化腐朽为神奇的QueryMapping 老车除了报废没别的方法? 应用系统就像老车,经过十几二十年的使用,积累了大量里程数据,但是英雄迟暮,反应迟钝,时不时还要病休.但就这样报废,推到重来,如果没有充 ...

  5. KingbaseES V8R6 集群运维案例-- sys_internal.init.*文件引起sys_basebackup失败

    案例说明: KingbaseES V8R6集群在执行'repmgr standby clone'或sys_basebackup克隆备库时出现如下图相关sys_internal.init文件错误: 适用 ...

  6. 05 CMMI(Capability Maturity Model Integration)【软件过程与管理】

    CMMI(Capability Maturity Model Integration) CMMI成熟度等级 执行的:过程不可预测,缺乏控制,反应式的 已管理的:项目描绘过程,而且经常是反应式的 已定义 ...

  7. CSS+HTML+flexible.js+rem实现屏幕缩放适配概念原理解释

    首先理解几个概念: (1)屏幕尺寸:屏幕对角线的长度,一般用英寸表示,1英寸=2.54cm. (2)dp((或者叫dip):设备独立像素,也就是设备屏幕上多少个点. (3)dpi:印刷行业术语,像素密 ...

  8. #树形dp,直径#51nod 1812 树的双直径

    题目 给定一棵树,边权是整数 \(c_i\) ,找出两条不相交的链(没有公共点), 使得链长的乘积最大(链长定义为这条链上所有边的权值之和,如果这条链只有1个点则链长视为0). \(n\leq 4*1 ...

  9. #排序,去重#洛谷 5682 [CSPJX2019]次大值

    题目 分析 首先,显然要排序去重,考虑最大值应该是\(a_{n-1}\)(排序后) 那次大值只有可能出现在\(a_{n-2}\)或者\(a_n\bmod a_{n-1}\)中 当然去重后如果只有一个数 ...

  10. openGauss每日一练第三天

    openGauss 每日一练第三天 本文出处:https://www.modb.pro/db/193083 学习目标 学习 openGauss 创建数据库.修改数据库属性和删除数据库 课后作业 1.分 ...