Javascript 滚动时淡出div，淡入其他div

我有一些章节，比如：

<section id="section1">Section 1</section>
<section id="section2">Section 2</section>
<section id="section3">Section 3</section>

但它只是保持正常滚动，没有任何fadeIn（）或fadeOut（）。

---

有什么方法可以解决这个问题，或者有什么更好的方法可以解决这个问题吗？

看看它，它可以满足您的需要。如果我做对了。

有一个名为

航路点的优秀插件

将其与

animate.css

一起使用，您就可以开始了。

$（文档）。就绪（函数（）{
$(document).ready(function () {
$(window).scroll(function() {
var windowBottom = $(this).scrollTop() + $(this).innerHeight();
$(".fade").each(function() { 
  /* .fade{opacity:0;} in css, Check the location of each desired element */
  var objectBottom = $(this).offset().top + $(this).outerHeight();

  /* If the element is completely within bounds of the window, fade it in */
  if (objectBottom < windowBottom) { //object comes into view (scrolling down)
    if ($(this).css("opacity")==0) {$(this).fadeTo(500,1);}} else { //object goes out of view (scrolling up)
    if ($(this).css("opacity")==1) {$(this).fadeTo(500,0);}
}
});
}).scroll(); //invoke scroll-handler on page-load
});

$（窗口）。滚动（函数（）{
var windowBottom=$（this.scrollTop（）+$（this.innerHeight（）；
$（“.fade”）.each（函数（）{
/*.fade{opacity:0；}在css中，检查每个所需元素的位置*/
var objectBottom=$（this.offset（）.top+$（this.outerHeight（）；
/*如果元素完全在窗口边界内，则淡入*/
如果（objectBottom

您可以在或上提供一些演示吗？您已经多次定义并初始化了

lastScrollTop

。您可能应该使用不同的变量来跟踪每个元素的滚动顶部值。只需将类fade{opacity:0；}添加到您的css文件中，并将class=“fade”添加到您的节中，如下所示：第1节第2节第3节，您需要jQuery来完成此操作，非常感谢。我回家后会试试的。但对我来说，它看起来很好

$(document).ready(function () {
$(window).scroll(function() {
var windowBottom = $(this).scrollTop() + $(this).innerHeight();
$(".fade").each(function() { 
  /* .fade{opacity:0;} in css, Check the location of each desired element */
  var objectBottom = $(this).offset().top + $(this).outerHeight();

  /* If the element is completely within bounds of the window, fade it in */
  if (objectBottom < windowBottom) { //object comes into view (scrolling down)
    if ($(this).css("opacity")==0) {$(this).fadeTo(500,1);}} else { //object goes out of view (scrolling up)
    if ($(this).css("opacity")==1) {$(this).fadeTo(500,0);}
}
});
}).scroll(); //invoke scroll-handler on page-load
});