首页
学习
活动
专区
工具
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

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

相关·内容

扫码

添加站长 进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

    运营活动

    活动名称
    广告关闭
    领券