滚动时改变div元素透明度的实现求助

嗨，我来帮你搞定这个问题！先梳理下你现有代码里的几个小问题，再给你完整的修复方案：

现有代码的问题点 #

• JS选择器错误：你用了$('header-title')，但这是类选择器，必须加上点号，应该写成$('.header-title')，不然根本选不到目标元素哦。
• 透明度无渐变效果：当前代码只是在滚动距离>0时直接跳到0.8，没有实现你想要的「逐渐」变透明的效果。
• CSS语法错误：position: float;是无效写法，float是独立的布局属性，不属于position的取值，得删掉或者替换成正确的position类型。
• 定位逻辑冲突：.header-title用了position: relative还搭配left/top/transform居中，可能达不到预期定位效果，建议换成position: absolute或者fixed（根据你想要滚动时元素是随页面移动还是固定位置来选择）。

修正后的完整代码 #

HTML部分 #

<script src="/js/titleScroll.js"></script>
<div class="header-title">
  <h1>Title</h1>
</div>

JavaScript（titleScroll.js） #

$(document).ready(function() {
  $(window).scroll(function() {
    // 获取当前滚动距离
    const scrollDistance = $(this).scrollTop();
    // 设置渐变的最大滚动范围，超过后透明度不再变化（可根据需求调整数值）
    const maxScrollRange = 200;
    // 计算渐变透明度：初始为1，滚动越多透明度越低，最低到0
    let opacityValue = 1 - (scrollDistance / maxScrollRange);
    // 确保透明度不会低于0，避免异常
    opacityValue = Math.max(opacityValue, 0);
    // 正确选中类元素并设置透明度
    $('.header-title').css('opacity', opacityValue);
  });
});

CSS部分 #

.header-title {
  width: 80%;
  height: 100px;
  left: 50%;
  top: 50%;
  font-size: 1.5em;
  text-align: center;
  transform: translate(-50%, -50%); /* 同时实现水平+垂直居中 */
  position: absolute; /* 替换无效的position: float */
  max-width: 100%;
}

.header-title h1 {
  color: white;
  text-shadow: 2px 2px 4px #d1d1d1;
  font-family: arial, sans-serif;
  white-space: nowrap;
  text-transform: uppercase;
  display: inline-block;
}

额外优化：添加平滑过渡效果 #

如果想要透明度变化更丝滑，可以给.header-title加上CSS过渡属性：

.header-title {
  /* 保留原有样式 */
  transition: opacity 0.3s ease; /* 0.3秒内平滑过渡，ease为缓动效果 */
}

这样滚动时文本的透明度变化会更自然，不会显得生硬啦！

内容的提问来源于stack exchange，提问作者SimplySnap