<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. table边框改为细线

    默认的TABLE边线设置即使是1px 是很粗的,会使用其他一些方法来制作出细线边框. 利用CSS来实现细线的方法,很有效,而且兼容所有浏览器. 细线表格如果单纯设置边框,很难保证浏览器兼容.常见的做法 ...

  2. DW:优化目标检测训练过程,更全面的正负权重计算 | CVPR 2022

    论文提出自适应的label assignment方法DW,打破了以往耦合加权的惯例.根据不同角度的一致性和非一致性指标,动态地为anchor分配独立的pos权重和neg权重,可以更全面地监督训练.此外 ...

  3. 慢查询SQL排查

    转载请注明出处️ 作者:测试蔡坨坨 原文链接:caituotuo.top/c56bd0c5.html 你好,我是测试蔡坨坨. 在往期文章中,我们聊过数据库基础知识,可参考「数据库基础,看完这篇就够了! ...

  4. Python爬虫爬取爱奇艺、腾讯视频电影相关信息(改进版)---团队第一阶段冲刺

    爱奇艺 1 import time 2 import traceback 3 import requests 4 from lxml import etree 5 import re 6 from b ...

  5. 取消掉远程桌面mstsc顶部(侧面)连接栏

    在进行mstsc远程桌面连接电脑或者虚拟机的时候,总是会出现一个连接栏.虽然点左边的图钉可以自动隐藏,但是每次鼠标滑到上面的时候,还是会冒出来,这个就有点闹心了. 查了下相关资料,解决了,特写下相关教 ...

  6. #决策单调性dp,分治#LOJ 6039「雅礼集训 2017 Day5」珠宝

    题目传送门 分析 观察到这个0/1背包中单个物品的体积不超过300,考虑分体积考虑. 设 \(dp[i]\) 表示容量大小为 \(i\) 的背包能获得的最大价值, \(dp[i]=\max\{dp[i ...

  7. OpenHarmony社区运营报告(2022年11月)

    本月快讯 • 11月24日,第二十届中日韩三国IT局长OSS会议暨东北亚开源软件推进论坛以在线形式成功召开.经审核评选认定,OpenAtom OpenHarmony(以下简称"OpenHar ...

  8. Mogdb - 安装报错Failed to encrypt the password for databaseError

    Mogdb - 安装报错 Failed to encrypt the password for databaseError 本文出处:https://www.modb.pro/db/418363 版本 ...

  9. 重新点亮shell————语法[四]

    前言 简单介绍一下语法. 正文 数组: 定义数组: IPTS =(10.0.0.1 10.0.0.2 10.0.0.3) 显示所以数组元素: echo ${IPTS[@]} 显示数组元素的个数 ech ...

  10. PIL.Image, numpy, tensor, cv2 之间的互转,以及在cv2在图片上画各种形状的线

    ''' PIL.Image, numpy, tensor, cv2 之间的互转 ''' import cv2 import torch from PIL import Image import num ...