首页 > 其他分享 >背景滚动条高度透明

背景滚动条高度透明

时间:2022-11-17 09:23:37浏览次数:44  
标签:pageYOffset 透明 高度 滚动条 handleScroll window scroll

vue实现不一样背景颜色的头部,在某个高度范围显示某个背景色
:class="pageYOffset > 62 ? 'header-bc':''" // 背景透明

滚动条高度:

mounted() {
    window.addEventListener('scroll', this.handleScroll)
  },
  destroyed() {
    window.removeEventListener('scroll', this.handleScroll)
  },
  methods: {
    handleScroll(e) {
      this.pageYOffset = window.pageYOffset
    },
)

 

 

 

 

 

标签:pageYOffset,透明,高度,滚动条,handleScroll,window,scroll
From: https://www.cnblogs.com/cwt981105/p/16898299.html

相关文章

  • Cesium获取BIM模型整栋与每一层的高度信息
    原因最近因为有这样的需求,但是BIM模型内部又没有Height的高度字段,因此只能通过加载模型中的包围盒去获取整栋及每一层之间的高度。记录一下。缺点获取的层的高度并不是......
  • Edge标题栏透明效果消失了
    今天更新Edge107后,发现标题栏的云母透明效果消失了。之前也消失过,后来通过设置在预览功能里面开启圆角选项卡的时候恢复了,今天发现圆角选项卡的方式也一并没了,看着很不习......
  • overflow:hidden解决高度塌陷原理
    https://www.jianshu.com/p/4473bffef8a0?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation我们大家理解的overflo......
  • 修改滚动条的样式
    ::-webkit-scrollbar{/*滚动条整体样式*/width:4px;/*高宽分别对应横竖滚动条的尺寸*/height:1px;}::-webkit-scrollbar-thumb{/*滚动条里面小方块*/......
  • JavaScript实现滚动条滚动给div加颜色
    实现原理当滚动的距离大于某一个元素到页面顶部的距离时候,给元素设置实现步骤1.获取某一个元素到页面顶部的距离2.如果距离大于零则给div加上颜色,如果等于0,即归位的时......
  • 修改滚动条样式(可以兼容火狐)
    .MoneyPlan-box{ width:100%; height:100%; text-align:left; box-sizing:border-box; border-radius:4px; overflow:hidden; background-co......
  • el-data-picker不能随滚动条滚动问题
    el-data-picker不能随滚动条滚动问题解决方法:主要跟父容器设置overflow属性有关。详细解决过程描述:有问题的页面元素上下包裹层级是:template>div>el-container->el-ma......
  • 修改滚动条样式
    <style>::-webkit-scrollbar{/*滚动条整体样式*/width:10px;/*高宽分别对应横竖滚动条的尺寸*/height:10px;}::-webk......
  • win10任务栏全透明
    为了让win10的界面更加好看,想让底部的任务栏全透明,想要实现很简单,只需要安装一个软件就可以.软件介绍官方下载地址:​​官方链接​​官方下载地址太慢,已经把软件放到......
  • jquery获取父级容器高度
    //获取浏览器显示区域的高度console.log($(window).height());//获取浏览器显示区域的宽度console.log($(window).width());//获取页面的文档高度console.log($(documen......