首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

在滚动中隐藏不透明度为0.9的固定div

,可以通过CSS和JavaScript来实现。

首先,需要给该固定div添加一个CSS样式,使其固定在页面上的某个位置,并设置初始的不透明度为0.9。例如:

代码语言:txt
复制
.fixed-div {
  position: fixed;
  top: 50px;
  left: 50px;
  opacity: 0.9;
}

接下来,使用JavaScript监听页面滚动事件,当页面滚动时,判断滚动的位置,如果超过了某个阈值,就将固定div的不透明度设置为0,隐藏起来。例如:

代码语言:txt
复制
window.addEventListener('scroll', function() {
  var fixedDiv = document.querySelector('.fixed-div');
  var scrollPosition = window.scrollY;

  if (scrollPosition > 200) {
    fixedDiv.style.opacity = 0;
  } else {
    fixedDiv.style.opacity = 0.9;
  }
});

在上述代码中,我们使用querySelector方法获取到了具有.fixed-div类名的固定div元素,并通过window.scrollY获取到了当前页面的滚动位置。当滚动位置超过了200像素时,将固定div的不透明度设置为0,隐藏起来;否则,将不透明度设置为0.9,显示出来。

这样,当页面滚动时,固定div会根据滚动位置的变化而改变不透明度,从而实现在滚动中隐藏不透明度为0.9的效果。

推荐的腾讯云相关产品:腾讯云CDN(内容分发网络),可以加速网站的访问速度,提高用户体验。产品介绍链接地址:https://cloud.tencent.com/product/cdn

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

jquery nicescroll 配置参数

(scrollabar“隐藏”状态),范围从1到0, 默认为0(隐藏) cursoropacitymax - 改变不透明度非常光标处于活动状态(scrollabar“可见”状态),范围从1到0,默...- 以像素光标边界半径,默认为​​“递四方” zIndex - 改变z-index值滚动div,默认值是9999 scrollspeed - 滚动速度,默认值60 mousescrollstep...时,(默认:true) autohidemode,如何隐藏滚动作品,真=默认/“光标”=只进游标隐藏/ false =不隐藏背景,CSS改变轨道背景下,默认为“” iframeautoresize...,加载事件AUTORESIZEiframe(默认:true) cursorminheight,设置像素最小光标高度(默认值:20) preservenativescrolling,您可以滚动本机可滚动区域用鼠标...)(默认:true) cursorfixedheight,用于光标像素设置固定高度(默认:false) hidecursordelay,设置微秒淡出滚动延迟时间(默认值:400) directionlockdeadzone

4.1K80

05-老马jQuery教程-动画

这个动画效果只调整元素高度,可以使匹配元素以“滑动”方式隐藏起来。jQuery 1.3,上下padding和margin也会有动画,效果更流畅。 参数跟show保持一致,不再赘述。...语法:fadeTo([[speed],opacity,[easing],[fn]]) 概述 把所有匹配元素不透明度以渐进方式调整到指定不透明度,并在动画完成后可选地触发一个回调函数。...这个动画只调整元素不透明度,也就是说所有匹配元素高度和宽度不会发生变化。...0完全透明,1完全不透明。 easing:(Optional) 用来指定切换效果,默认是"swing",可用参数"linear" fn:动画完成时执行函数,每个元素执行一次。...当.finish()一个元素上被调用,立即停止当前正在运行动画和所有排队动画(如果有的话),并且他们CSS属性设置它们目标值(所有动画目标值)。所有排队动画将被删除。

2K00

Custom Beautify

同样是使用F12打开控制台,使用左上角网页元素选择器,定位到希望隐藏元素上,获取他id或者class,然后custom.css中使用隐藏属性,此处假设我要隐藏idhidden_element...可以隐藏所有的信息,包括div文本和图片,同时被隐藏内容不占用空间。...fixed定位会使得该元素位置相对于浏览器窗口而固定,即使窗口滚动,它也不会移动。...例如我希望idfixedElement按钮牢牢固定在右下角,可以定义它定位属性: hover选择器定义鼠标悬停到该元素上时样式,例如,我希望鼠标悬停在上述这个idfixedElement按钮时...主题使用iddiv来存放背景图片,使用iddiv来存放banner图片。只需要通过重设这个div背景图片属性就可以替换背景图片。

2.3K20

js实现:仿京东搜索栏随滑动透明度渐变

> 其中search-box-cover就是控制透明度渐变背景...0.9 : ($body.scrollTop() / 150)) }) } //初始化设置背景透明度 setCoverOpacity(); //监听滚动条事件,改变透明度...0.9 : ($body.scrollTop() / 150)) 此三目表达式是判断当前滚动条位置所在位置,如果位置值除以150大于0.9,就返回0.9,反之就返回那个小于等于0.9值,将返回值设置背景明度就完成了...2、由于滚动位置是动态获取,所以设置透明度会不停改变,不用单独再做渐变动画效果。 3、最终透明度问题,京东最终背景设置0.9,所以本案例也采用0.9,同时体验效果会更好。...4、滚动条位置导致渐变,将150设置更大,渐变距离会更长。 再次声明:不兼容IE8及以下

1.8K10

CSS

important 3,选择器权重   复合选择器,如何计算选择器权重,只要出现important,优先级永远是最高,其次是行内样式   行内:1000   id:100   类:10   元素...visibility:hidden隐藏元素仍然占据空间,该元素虽然被隐藏了,但仍然会影响布局 display:none隐藏某个元素不会占据空间,不会影响布局   七、font相关属性 font-style...这和rgb差不多,只是多了第四个参数叫透明度,范围是0.0-1.0 opacity属性设置透明度 opacity:值 值0-1,0完全透明,1完全不透明   十二、盒子模型 ?...默认值,无定位,标签设置top,left等值都没作用   2,relative(相对定位) 相对定位是相对于该元素文档流原始位置,在这种情况下,虽然原来位置没有了内容,但依然占据位置,即占据文档流空间...4,fixed(固定位置,不管页面怎么滚动,这个元素就固定某个位置) fixed:元素脱离正常文档流 ? ? <!

1.4K11

前端之CSS内容

/不透明度,它范围0.0到1.0之间。...也就是说,该元素不但被隐藏了,而且该元素原本占用空间也会从页面布局消失。...6.2 relative(相对定位)   相对定位是相对于该元素文档流原始位置,即以自己原始位置参照物。有趣是,即使设定了元素相对定位以及偏移值,元素还占有着原来位置,即占据文档流空间。...6.4 fixed(固定)   fixed:对象脱离正常文档流,使用top、right、bottom、left 等属性以窗口参考点进行定位,当出现滚动条时,对象不会随着滚动。...在理论上,被设置 fixed 元素会被定位于浏览器窗口一个指定坐标,不论窗口是否滚动,它都会固定在这个位置。 示例代码: <!

5.2K100

6-css样式

background-attachment background-attachment:fixed 背景图像是否固定或者随着页面的其余部分滚动 background-attachment值可以是scroll...:word-spacing 文本大小写text-transform capitalize文本每个单词以大写字母开头。...cursor:pointer default默认,pointer小手形状,move移动形状 透明度opacity opacity:0.3 透明度值可以使0到1之间数字,0代表透明,1代表完全不透明...auto如果内容被修剪,则浏览器会显示滚动条以便查看其余内容。...左描边border-left 间距margin 内填充padding 浮动float 浮动原理:浮动使元素脱离文档普通流,漂浮在普通流之上 浮动元素依然按照其普通流位置上出现,然后尽可能根据设置浮动方向向左或向右浮动

1.9K20

前端零基础教学开始第六天 06 – day 多种定位方法 和 精灵图使用 元素显示与隐藏

top{ background-color: red; } .bottom{ background-color: pink; /*相对定位不脱离标准流 相对定位 是元素相对于它,标准流位置...+ 边偏移属性 来设置元素位置 相对定位以 自己标准流位置左上角基点 + 边偏移属性,定位元素新位置 */ position: relative; left: 300px;...绝对定位有两个重要概念 1、完全脱标 —-完全不占位 2、父元素要有定位 —- 父元素标准六位置 + 边偏移属性 来设置 元素位置 复制代码 固定定位 固定定位 1、完全脱标 — 完全不占位 2、只认浏览器可视窗口,就是人看见浏览器地方 3、不随着滚动滚动 复制代码 元素显示与隐藏 css 中三个显示和隐藏单词比较常见,我们要区分开他们分别是display visibility 和 overflow display

3.5K20

CSS基础-背景属性:颜色、图片、重复

在网页设计,背景是构建视觉层次和氛围关键元素之一。CSS背景属性我们提供了强大工具,用于控制元素背景颜色、图片、以及它们显示方式。...常见问题与避免策略 问题:颜色不透明度影响子元素。 避免:使用rgba()设置背景色时,确保仅改变背景而不影响子元素透明度。...div { background-color: rgba(255, 0, 0, 0.5); /* 半透明红色 */ } 二、背景图片(background-image) 背景图片允许将图像设置元素背景...div { background-image: url('pattern.png'); background-repeat: repeat-x; /* 图片只水平方向重复 */ } 四...center / cover fixed; } 在这个例子,我们不仅设置了渐变背景色,还叠加了一张图片作为背景,图片居中显示,且根据容器大小缩放以完全覆盖,固定图片位置以创建滚动效果。

10710

前端|手风琴--抽屉式网页特效

(1)通过div来规定主要内容部分占据大小,并通过CSS来修正。 (2)使用overflow标签,使得多余图片部分隐藏。 (3)通过js来实现图片移动。...图1 (2)wrap里面添加ul列表,列表添加主要内容图片和文字,并为之设置CSS效果。使用overflow属性规定当内容溢出元素框时发生事情。...在这里可以使用overflow:hidden,它一般用在固定宽高div里面,目的是隐藏溢出使内部元素高度即使超过父元素也能够被隐藏;此外,overflow:hidden另一个流行用途是用在没有宽高...,用float属性来清除浮动,并且用rgba属性来文字改变颜色和透明度。...rgba是代表Red(红色) Green(绿色) Blue(蓝色)和 Alpha(不透明度)三个单词缩写,颜色值取0至250;透明度取值0到1之间,数值越小则越透明。

3.4K10

CollapsingToolbarLayout使用

关于CollapsingToolbarLayout属性官网上可以查到,这里我只介绍案例我们常用几个属性:title标题,布局展开时放大显示图片底部,布局折叠时缩小显示Toolbar左侧。...attr/colorPrimary",即显示Toolbar颜色,应用主题色;layout_collapseMode折叠模式,设置其他控件滚动时自身交互行为,有两种取值:parallax,折叠视差效果...(不透明度),0.0 ~ 1.0之间,默认值0.5。...当设置1.0,滚动列表时图片不会折叠移动; 代码实现: 关于CoordinatorLayout作为根布局容器如何协调子控件之间交互行为,可以参考上一篇文章,这里我介绍一下本例几个新注意点。...和layout_anchorGravity可以控制FloatingActionButtonbehavior和位置,如上图所示,当滚动列表是,FAB按钮会随着AppBarLayout而显示和隐藏,并自带缩放动画

2.4K60

05-老马jQuery教程-动画

这个动画效果只调整元素高度,可以使匹配元素以“滑动”方式隐藏起来。jQuery 1.3,上下padding和margin也会有动画,效果更流畅。 参数跟show保持一致,不再赘述。...语法:fadeTo([[speed],opacity,[easing],[fn]]) 概述 把所有匹配元素不透明度以渐进方式调整到指定不透明度,并在动画完成后可选地触发一个回调函数。...这个动画只调整元素不透明度,也就是说所有匹配元素高度和宽度不会发生变化。...50地方并且完全清晰显示出来(透明度1) $("p").animate({ left: 50, opacity: 'show' }, 500); // 一个使用“easein”函数提供不同动画样式例子...当.finish()一个元素上被调用,立即停止当前正在运行动画和所有排队动画(如果有的话),并且他们CSS属性设置它们目标值(所有动画目标值)。所有排队动画将被删除。

1.9K50

第73天:jQuery基本动画总结

1、jQuery隐藏元素hide方法 让页面上元素不可见,一般可以通过设置cssdisplaynone属性。...参数对应时间内,元素会发生显示/隐藏改变,改变过程中会把元素高、宽、不透明度进行一系列动画效果。...这个动画只调整元素不透明度,也就是说所有匹配元素高度和宽度不会发生变化。 字符串 'fast' 和 'slow' 分别代表200和600毫秒延时。...注意: - 淡入动画原理:操作元素不透明度从0%逐渐增加到100% - 如果元素本身是可见,不对其作任何改变。...fadeTo() 方法必需 opacity 参数将淡入淡出效果设置给定不透明度(值介于 0 与 1 之间)。可选 callback 参数是该函数完成后所执行函数名称。

3.2K10

jQuery里面的动画

显示完成后可选地触发一个回调函数 slideUp([s,[e],[fn]]) 通过高度变化(向上减小)来动态地隐藏所有匹配元素,隐藏完成后可选地触发一个回调函数 slideToggle([s],...function(){ console.log("动画完成"); }); }) 三、淡入淡出动画 方法 概述 fadeIn([s],[e],[fn]) 通过不透明度变化来实现所有匹配元素淡入效果...,并在动画完成后可选地触发一个回调函数 fadeOut([s],[e],[fn]) 通过不透明度变化来实现所有匹配元素淡出效果,并在动画完成后可选地触发一个回调函数 fadeTo([[s],o,[e...],[fn]]) 把所有匹配元素不透明度以渐进方式调整到指定不透明度,并在动画完成后可选地触发一个回调函数 fadeToggle([s,[e],[fn]]) 通过不透明度变化来开关所有匹配元素淡入和淡出效果...stop([c],[j]) 停止所有指定元素上正在运行动画 delay(d,[q]) 设置一个延时来推迟执行队列之后项目 finish([queue]) 停止当前正在运行动画,删除所有排队动画

1.4K20

小程序textarea与弹窗

限制 小程序 textarea 是由客户端创建原生组件,由于原生组件脱离 WebView 渲染流程外,因此使用时有以下限制: 原生组件层级是最高,所以页面其他组件无论设置 z-index...多少,都无法盖原生组件上。...textarea 该方案适合弹窗尺寸能够覆盖整个 textarea 或者弹窗模态层是不透,这样即便 textarea 隐藏了,对用户来说无感知,当弹窗消失以后再把 textarea 显示出来。...需要注意是对于带半透明模态层弹窗,其所在页面内容最好不要超过屏幕高度,否则页面滚动会让用户知道 textarea 被隐藏了。 <textarea wx:if="{{ !...,textarea 和 view 切换会有较为明显<em>的</em>闪动,适当调低模态层<em>的</em>透<em>明度</em>可以缓解闪动<em>的</em>视觉影响。

1.9K10

前端学习笔记之CSS知识汇总 CSS介绍

alpha, 指定了色彩明度/不透明度,它范围0.0到1.0之间。...也就是说,该元素不但被隐藏了,而且该元素原本占用空间也会从页面布局消失。  ...relative(相对定位) 相对定位是相对于该元素文档流原始位置,即以自己原始位置参照物。有趣是,即使设定了元素相对定位以及偏移值,元素还占有着原来位置,即占据文档流空间。...fixed(固定) fixed:对象脱离正常文档流,使用top,right,bottom,left等属性以窗口参考点进行定位,当出现滚动条时,对象不会随着滚动。...在理论上,被设置fixed元素会被定位于浏览器窗口一个指定坐标,不论窗口是否滚动,它都会固定在这个位置。 示例代码: <!

2.1K30

扫码

添加站长 进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

    运营活动

    活动名称
    广告关闭
    领券