映射滚动值以更改 rgba 不透明度

Question

我希望 div 颜色的不透明度随着用户滚动而改变。

虽然它需要一些东西：

正在检查 div 是否在 viewport 中。用这段代码做到了：

var scrollBottom = $(window).scrollTop() + $(window).height(),

    ideeHeight = $(this).offset().top;

    if (scrollBottom >= ideeHeight)

Mapping 值滚动到 0.0 -> 1.0 值。此代码：

var docHeight = $(window).height(), opacity = map(ideeHeight, 0, docHeight, 0.0, 1.0);
滚动时更改 div 颜色的 不透明度 。我试过了：

$(this).css("background", "rgba(255, 255, 255," + opacity + ")");

这似乎不起作用。谁能告诉我我在哪里犯了错误，或者这根本不是正确的方法吗？谢谢！

$(window).on("scroll", function() {
  function map(num, in_min, in_max, out_min, out_max) {
    return (num - in_min) * (out_max - out_min) / (in_max - in_min) + out_min;
  }

  $(".idee").each(function() {
    var scrollBottom = $(window).scrollTop() + $(window).height(),
      ideeHeight = $(this).offset().top;
    if (scrollBottom >= ideeHeight) {
        var docHeight = $(window).height(),
        opacity = map(ideeHeight, 0, docHeight, 0.0, 1.0);

      $(this).css("background", "rgba(255, 255, 255," + opacity + ")");
    }
  });
});

body {
  background: #cdd3d8;
  font-family: Helvetica;
}

.idee {
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 80vw;
  min-height: 50vh;
  margin: 2vw auto;
  padding: 1em;
  background: rgba(255, 255, 255, 0);
  box-shadow: 0px 2px 10px 2px grey;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="idee">
  <p>Hello World</p>
</div>
<div class="idee">
  <p>Hello World</p>
</div>
<div class="idee">
  <p>Hello World</p>
</div>
<div class="idee">
  <p>Hello World</p>
</div>
<div class="idee">
  <p>Hello World</p>
</div>
<div class="idee">
  <p>Hello World</p>
</div>
<div class="idee">
  <p>Hello World</p>
</div>
<div class="idee">
  <p>Hello World</p>
</div>
<div class="idee">
  <p>Hello World</p>
</div>
<div class="idee">
  <p>Hello World</p>
</div>
<div class="idee">
  <p>Hello World</p>
</div>
<div class="idee">
  <p>Hello World</p>
</div>

另外 here 是一个 jsfiddle link 如果它更容易的话。

Answer 1

由于您需要从 0 到 1 的不透明度，map() 函数应该 return 映射到输出值范围的输入值的比率，而不是映射输出值本身。

根据您的意见，我使用了中的 calculateVisibilityForDiv() 函数来计算视口中可见元素的比例。然后将不透明度设置为每个元素可见的比率（从 0 到 1）。

var windowHeight = $(window).height();

function calculateVisibilityForDiv($elm) {

  var docScroll = $(document).scrollTop();
  var elmPosition = $elm.offset().top;
  var elmHeight = $elm.height();
  var hiddenBefore = docScroll - elmPosition;
  var hiddenAfter = (elmPosition + elmHeight) - (docScroll + windowHeight);

  if ((docScroll > elmPosition + elmHeight) || (elmPosition > docScroll + windowHeight)) {
    var result = 0;
  } else {
    var result = 1;

    if (hiddenBefore > 0) {
      result -= hiddenBefore / elmHeight;
    }

    if (hiddenAfter > 0) {
      result -= hiddenAfter / elmHeight;
    }

  }
  return result;

}

$(window).on("scroll", function() {

  $(".idee").each(function() {
    var $this = $(this);
    var opacity = calculateVisibilityForDiv($this);
    $this.css("background", "rgba(255, 255, 255," + opacity + ")");
  });

}).trigger('scroll');

body {
  background: #cdd3d8;
  font-family: Helvetica;
}

.idee {
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 80vw;
  min-height: 50vh;
  margin: 2vw auto;
  padding: 1em;
  background: rgba(255, 255, 255, 0);
  box-shadow: 0px 2px 10px 2px grey;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="idee">
  <p>Hello World</p>
</div>
<div class="idee">
  <p>Hello World</p>
</div>
<div class="idee">
  <p>Hello World</p>
</div>
<div class="idee">
  <p>Hello World</p>
</div>
<div class="idee">
  <p>Hello World</p>
</div>
<div class="idee">
  <p>Hello World</p>
</div>
<div class="idee">
  <p>Hello World</p>
</div>
<div class="idee">
  <p>Hello World</p>
</div>
<div class="idee">
  <p>Hello World</p>
</div>
<div class="idee">
  <p>Hello World</p>
</div>
<div class="idee">
  <p>Hello World</p>
</div>
<div class="idee">
  <p>Hello World</p>
</div>

归属地：
堆栈溢出；
tom and by Stanislav.

问

编辑：
修改为当元素离开视口时不淡出。

var windowHeight = $(window).height();

function calculateVisibilityForDiv($elm) {

  var docScroll = $(document).scrollTop();
  var elmPosition = $elm.offset().top;
  var elmHeight = $elm.height();
  var hiddenAfter = (elmPosition + elmHeight) - (docScroll + windowHeight);
  var ratio = 1 - (hiddenAfter / elmHeight);
  return ratio > 0 ? (ratio < 1 ? ratio : 1) : 0;

}

$(window).on("scroll", function() {

  $(".idee").each(function() {
    var $this = $(this);
    var opacity = calculateVisibilityForDiv($this);
    $this.css("background", "rgba(255, 255, 255," + opacity + ")");
  });

}).trigger('scroll');

body {
  background: #cdd3d8;
  font-family: Helvetica;
}

.idee {
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 80vw;
  min-height: 50vh;
  margin: 2vw auto;
  padding: 1em;
  background: rgba(255, 255, 255, 0);
  box-shadow: 0px 2px 10px 2px grey;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="idee">
  <p>Hello World</p>
</div>
<div class="idee">
  <p>Hello World</p>
</div>
<div class="idee">
  <p>Hello World</p>
</div>
<div class="idee">
  <p>Hello World</p>
</div>
<div class="idee">
  <p>Hello World</p>
</div>
<div class="idee">
  <p>Hello World</p>
</div>
<div class="idee">
  <p>Hello World</p>
</div>
<div class="idee">
  <p>Hello World</p>
</div>
<div class="idee">
  <p>Hello World</p>
</div>
<div class="idee">
  <p>Hello World</p>
</div>
<div class="idee">
  <p>Hello World</p>
</div>
<div class="idee">
  <p>Hello World</p>
</div>

映射滚动值以更改 rgba 不透明度

Mapping scrolling values to change rgba opacity

mapping

jquery

scroll

viewport

rgba