<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. module 'numpy' has no attribute 'bool'

    module 'numpy' has no attribute 'bool' 问题: Traceback (most recent call last): File "/home/test. ...

  2. verilog之时钟信号的编写2

    verilog之时钟信号的编写2 1.时钟信号的特点 时钟信号除了可以根据时序一个个变化列举出来,还可以利用其循环的变化的特点,使用循环执行语句always来实现.这种方法实现的时钟信号可以一直执行且 ...

  3. KingbaseES变更表结构表重写问题

    在实际项目使用数据库的过程中修改字段类型这类需求比较常见. 一.修改表字段类型需要知道: 1.修改表结构可能会导致表进行重写(表OID发生变化). 2.修改表结构带有索引或者字段类型长度或者精度操作时 ...

  4. C++设计模式 - 桥模式(Bridge)

    单一职责模式: 在软件组件的设计中,如果责任划分的不清晰,使用继承得到的结果往往是随着需求的变化,子类急剧膨胀,同时充斥着重复代码,这时候的关键是划清责任. 典型模式 Decorator Bridge ...

  5. C++ 自动计时

    #include<iostream> #include<chrono> struct Timer { std::chrono::time_point<std::chron ...

  6. [IOI2000]邮局 题解

    简要题意 线段上有 \(V\) 个村庄,现在要建 \(P\) 个邮局,使每个村庄到最近的邮局的距离之和最小. 50分做法 设\(dp[i][j]\) 表示第一个村庄到第 \(i\) 个村庄,建了 \( ...

  7. Python设计模式----4.构建者模式

    构建者模式: 将一个复杂对象的构造与表现进行分离,利用多个步骤进行创建,同一个构建过程可用于创建多个不同的表现 构建者模式一般由 Director(指挥官)和 Builder(建设者)构成 class ...

  8. 数据结构实验代码分享 - 5 (HashTable - 链接法)

    题目:通信录查询系统(查找应用) [问题描述] 设计散列表(哈希表)实现通讯录查找系统. (1) 设每个记录有下列数据项:电话号码.用户名.地址: (2) 从键盘输入各记录,分别以电话号码为关键字建立 ...

  9. Oracle 在PL/SQL将字符串分割输出

    Oracle 在PL/SQL将字符串分割输出 示例如下: declare begin for maina in (select tt.line ll from (select regexp_subst ...

  10. 力扣561(java&python)-数组拆分(简单)

    题目: 给定长度为 2n 的整数数组 nums ,你的任务是将这些数分成 n 对, 例如 (a1, b1), (a2, b2), ..., (an, bn) ,使得从 1 到 n 的 min(ai, ...