Отображение значений прокрутки для изменения непрозрачности rgba

Question

Я бы хотел, чтобы непрозрачность цвета div изменялась по мере прокрутки пользователем.

Однако требуется несколько вещей:

• Проверка, еслиdiv находится в окне просмотра .Сделал это с помощью этого кода:

  var scrollBottom = $(window).scrollTop() + $(window).height(),
  
      ideeHeight = $(this).offset().top;
  
      if (scrollBottom >= ideeHeight)
  

• Отображение значений прокрутки до 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>

Также здесь является ссылкой jsfiddle, если это проще.

Answer 1

Поскольку вам нужна прозрачность от 0 до 1, функция map() должна возвращать коэффициент входного значения, сопоставленного с диапазоном выходных значений, а не само сопоставленное выходное значение.

Основываясь на ваших комментариях, я использовал функцию 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>

Атрибуция:
Переполнение стека Сколько элементов видно в окне просмотра ;
, заданный Том и ответил от Станислав .

---

Редактировать:
Изменено, чтобы не исчезать, когда элемент покидает область просмотра.

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>