在滚动时隐藏不透明度为 0.9 的固定 div答案

【问题标题】：Hide a fixed div with opacity 0.9 on scroll在滚动时隐藏不透明度为 0.9 的固定 div
【发布时间】：2019-04-26 20:48:01
【问题描述】：

在最近的一个模板中，我使用以下代码在滚动时隐藏了一个 div 中的标题：

<script>
$(window).scroll(function(){
    $(".title").css("opacity", 0.9 - $(window).scrollTop() / 5);
  });
</script>

在 Safari 中我遇到的问题是，如果我在 Safari 中通过 div 向上滚动添加的不透明度高于标准值 0.9。这在我的模板上看起来不太好，因为 div 是不透明度为 0.9 的标题的一部分。我希望它以 0.9 的不透明度显示，而不是 1 或 1.2 等。

该效果仅在 Safari 中通过滚动反弹效果可见。我尝试将其添加到我的 CSS 中，但没有任何积极影响：

html,
body {
  height: 100%;
  width: 100%;
  overflow: auto;
}

有什么想法吗？

你，再见！

【问题讨论】：

标签： javascript html css safari opacity

【解决方案1】：

您可以在应用之前检查该值，并确保它不高于 0.9，如下所示：

$(window).scroll(function()
{
   var opacity = 0.9 - $(window).scrollTop() / 5;
   if (opacity > 0.9)
   {
      opacity = 0.9;
   }
   $(".title").css("opacity", opacity);
});

【讨论】：

【解决方案2】：

你可以使用条件三元来限制它：

var opacity = 0.9 - $(window).scrollTop() / 5;
$(".title").css("opacity", opacity > 0.9 ? 0.9 : opacity);

【讨论】：