Jquery 在我向下滚动时淡入 div

Question

我在另一个 post 上发现了这个，它很好用，除了我需要反转它，这样当我滚动 "down" 它会在 div.

中淡出

var target = $('#bluOverlay');
var targetHeight = target.outerHeight();

$(document).scroll(function(e){
    var scrollPercent = (targetHeight - window.scrollY) / targetHeight;
    if(scrollPercent >= 0){
        target.css('opacity', scrollPercent);
    }
});

这是另一个 post http://jsfiddle.net/meEf4/

的工作 fiddle

Answer 1

您可以将 div 的 opacity 一开始设置为零，然后在向下滚动时逐渐增加不透明度。

Demo

var target = $('div'),
  targetHeight = target.outerHeight();

$(document).scroll(function(e) {
  var scrollPercent = (targetHeight - window.scrollY) / targetHeight;

  if (scrollPercent >= 0) {
    target.css('opacity', 1 - scrollPercent);
  }
});

body {
  height: 3000px
}
div {
  height: 1000px;
  background: red;
  opacity: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div></div>

Jquery 在我向下滚动时淡入 div

Jquery fade in div as I scroll down

jquery

css

scroll

fade