javascript - 在滚动条上隐藏不透明度为 0.9 的固定 div

Question

在最近的模板中，我在一个 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;
}

有什么想法吗？

再见!

Answer 1

您可以在应用之前检查该值并确保它不超过 0.9，如下所示:

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