<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. 【论文项目复现1】漏洞检测项目复现_VulDeeLocator

    复现环境 Ubuntu 20.04 CPU: 32G GPU: 11G 2080ti Source2slice: clang-6.0 + llvm + dg (dg: https://github.c ...

  2. KingbaseES V8R6 运维案例 --flashback drop table

    一.KingbaseES V8R6 flashback drop table介绍 使用FLASHBACK删除和恢复表 删除表时,数据库不会立即删除与该表关联的空间.数据库重命名表,并将其和任何关联的对 ...

  3. 程序员必备上传服务器Xftp及连接服务器工具Xshell

    1.下面截图为破解工具,点击执行就可以用了 压缩包放云盘了,私信我即可 (不知道咋上传,有点尴尬Q.Q)

  4. #网络流,dinic,最小割#洛谷 3227 [HNOI2013]切糕

    题目传送门 题目大意 \(P\)行\(Q\)列的楼房高度均为\(R\),每一层改造要花费一定的金钱, 每个楼房都要挑选有且仅有一层进行改造,并且相邻两个楼房改造位置的相对高度不能超过\(D\), 问最 ...

  5. 使用OHOS SDK构建opus

    参照OHOS IDE和SDK的安装方法配置好开发环境. 从github下载源码. 执行如下命令: git clone --depth=1 https://github.com/xiph/opus 进入 ...

  6. HarmonyOS语言基础类库开发指南上线啦!

      语言基础类库提供哪些功能?多线程并发如何实现?TaskPool(任务池)和Worker在实现和使用场景上有何不同? 针对开发者关注的并发等语言基础类库的相关能力,我们在新推出的语言基础类库开发指南 ...

  7. Maven 必备技能:MAC 系统下 JDK和Maven 安装及环境变量配置详细讲解

    开发中难免因系统问题或者版本变更反复折腾JDK和Maven环境变量,干脆写个笔记备忘个,也方便小伙伴们节省时间. =================JDK安装与环境变量配置====== 1.官网下载j ...

  8. CentOS6.4中yum命令安装php5.2.17[转载未亲测]

    最近给公司部署服务器的时候发现他们提供的服务器是centos6.4系统的,装好系统和相关服务httpd,mysql,php,一跑代码,发现php5.3中的zend加密不能用,安装Zend Guard ...

  9. spring boot 学习前提

    前言 总结spring boot的学习前提. 正文 1.spring 程度(可以基本使用,我在学习spring boot的时候,感觉到需要一些spring的基础) 2.maven (这个是包管理,一定 ...

  10. redis 简单整理——发布与订阅[十四]

    前言 简单介绍一下redis的发布与订阅. 正文 Redis提供了基于"发布/订阅"模式的消息机制,此种模式下,消息发布 者和订阅者不进行直接通信,发布者客户端向指定的频道(cha ...