<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. 常用命令---less---more

    常用命令---less---more 常用选项 less 和 more 都是 Linux 和类 Unix 系统中的文本阅读工具,主要用于分页查看文件内容.虽然两者都能让用户逐屏查看大文件,但 less ...

  2. 鸿蒙HarmonyOS实战-ArkUI组件(Flex)

    一.Flex 1.概述 Flex布局它可以让容器中的子元素具有弹性伸缩性.Flex布局是一种二维布局模型,它可以在任意方向上对元素进行排列,并且可以动态地调整元素的大小和位置,以适应不同的屏幕尺寸和设 ...

  3. 使用Go语言开发一个短链接服务:二、架构设计

    章节  使用Go语言开发一个短链接服务:一.基本原理  使用Go语言开发一个短链接服务:二.架构设计  使用Go语言开发一个短链接服务:三.项目目录结构设计  使用Go语言开发一个短链接服务:四.生成 ...

  4. Word文档最后一页空白页中换行符无法删除

    Word文档最后一页空白页中换行符无法删除 问题如题: 尝试了delete.backspace.backspace+delete都不行. 找到了这个方法: 选中最后一页的换行符,然后段落--间距--行 ...

  5. cyc_to_led

    Entity: cyc_to_led File: cyc_to_led.v Diagram Generics Generic name Type Value Description MD_SIM_AB ...

  6. WPF中封装一个自己的MessageBox

    前言 在WPF应用程序开发中,我们可以借助其强大灵活的设计能力打造出绚丽而富有创意的用户界面.然而,与这种高度定制化的界面相比,标准MessageBox却显得有些原始和古老.它的外观与现代.绚丽的应用 ...

  7. ET介绍——C#更好的协程

    更好的协程 上文讲了一串回调就是协程,显然这样写代码,增加逻辑,插入逻辑非常容易出错.我们需要利用异步语法把这个异步回调的形式改成同步的形式,幸好C#已经帮我们设计好了,看代码 // example2 ...

  8. 赋能千行百业数字化转型,OpenHarmony生态新成果即将亮相HDC2022

     第四届华为开发者大会 2022(Together)将于11月4日-6日在东莞召开,OpenAtom OpenHarmony(以下简称"OpenHarmony")将携生态新成果亮相 ...

  9. Spring源码 19 IOC getBean方法

    前面实现了 ClassPathXmlApplicationContext 的构造,接下来分析其调用的 getBean 方法. 以 getBean(UserDao.class) 为例. 1 Abstra ...

  10. LLM应用实战:当KBQA集成LLM

    1. 背景 应项目需求,本qiang~这两周全身心投入了进去. 项目是关于一个博物馆知识图谱,上层做KBQA应用.实现要求是将传统KBQA中的部分模块,如NLU.指代消解.实体对齐等任务,完全由LLM ...