滚动隐藏元素后，如何实现向上滚动时重新显示该元素？

问题描述 #

已实现滚动时隐藏div，但向上滚动到顶部附近时无法重新显示该div，需要解决此问题。

原代码 #

HTML #

<body>
  <div class="imagem-capa">
    <img src="https://www.collinsdictionary.com/images/full/apple_158989157.jpg"></div>
  <div class="random"></div>
<script src="pen.js"></script>
</body>

CSS #

.random {
  background-color: red;
  height: 500px;
}

.imagem-capa img {
  height: 500px;
}

JavaScript #

let capa = document.getElementsByClassName("imagem-capa");
console.log(capa);

document.addEventListener("scroll", function () {
  let scrollPosition = window.pageYOffset;

  if (scrollPosition <= 50) {
    capa[0].style.display = 'block' - scrollPosition / 50;
  } else {
    capa[0].style.display = 'none'  
  }
});

问题分析 #

核心错误在于capa[0].style.display = 'block' - scrollPosition / 50;这一行：

• 'block'是字符串，与数字scrollPosition / 50做减法运算会得到NaN，而display属性不接受NaN作为有效值，导致元素无法正确显示。

解决方案 #

基础修复（直接显示/隐藏） #

修改JavaScript代码，将无效的display赋值替换为合法的属性值：

// 直接获取目标元素，避免重复索引访问
let capa = document.getElementsByClassName("imagem-capa")[0];

document.addEventListener("scroll", function () {
  let scrollPosition = window.pageYOffset;

  if (scrollPosition <= 50) {
    capa.style.display = 'block'; // 合法的display值，确保元素显示
  } else {
    capa.style.display = 'none';  
  }
});

优化版（平滑过渡效果） #

如果需要滚动时的平滑显示/隐藏动画，建议使用opacity配合CSS过渡，替代display（display切换无过渡效果）：

1. 更新CSS，添加过渡效果：

.random {
  background-color: red;
  height: 500px;
}

.imagem-capa {
  transition: opacity 0.3s ease; /* 添加过渡动画 */
}

.imagem-capa img {
  height: 500px;
}

2. 修改JavaScript代码：

let capa = document.getElementsByClassName("imagem-capa")[0];

document.addEventListener("scroll", function () {
  let scrollPosition = window.pageYOffset;

  if (scrollPosition <= 50) {
    // 根据滚动位置计算透明度，实现渐变显示
    capa.style.opacity = 1 - scrollPosition / 50;
    capa.style.visibility = 'visible'; // 确保元素可见
  } else {
    capa.style.opacity = 0;
    capa.style.visibility = 'hidden'; // 隐藏元素（仍占空间，若要完全移除可用display:none）
  }
});

内容的提问来源于stack exchange，提问作者Kauê Friedrich