如何修改JS代码实现向上滚动时fixed div淡入效果

要实现向上滚动时fixed元素淡入，核心是让元素的透明度随滚动距离（scroll值）的减小而增大——也就是页面越靠近顶部（scroll越小），元素越清晰；页面越靠下（scroll越大），元素越透明。

修改后的代码如下：

var turn = document.getElementById('turn');

// 初始让元素处于透明状态（根据需求可调整）
turn.style.opacity = 0;

window.addEventListener('scroll', function(e) {
  var scroll = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
  // 核心计算：scroll从400降到0时，opacity从0升到1；scroll超过400时保持透明
  turn.style.opacity = Math.max(0, Math.min(1, 1 - scroll / 400));
});

逻辑说明： #

• 1 - scroll / 400：当scroll为0（页面顶部），值为1（完全显示）；scroll为400时，值为0（完全透明）；scroll超过400时，值为负数。
• Math.max(0, ...)：确保透明度不会低于0（避免出现无效的负透明度）。
• Math.min(1, ...)：确保透明度不会超过1（符合CSS opacity的有效范围）。

自定义调整： #

• 如果想改变淡入的触发滚动距离，把400改成你需要的数值（比如600，代表滚动到600px以下时元素完全透明）。
• 如果想要元素保留最低透明度（比如0.1），把Math.max(0, ...)里的0改成0.1。

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