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);
});

Answer 2

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

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

隐藏滚动不透明度为0.9的固定div

2 个答案: