向下滚动时保持div在窗口中间可见，并在到达特定点后逐渐消失

Question

我正在尝试使用jQuery和CSS做一个简单的视差效果。

我有2个长的div，一个是2000px ，另一个是1000px每这些div的一个有文字里面的孩子股利。

我想让这些子div居中在可见窗口的中间（不是div高度为2000px ，而是可见窗口），并保持居中并在中间，而我向下滚动，然后在到达下一个div之前的某个点。

此刻，我设法创建了html布局和CSS，并使div在使用jQuery单击时淡出。

但是我无法将它们居中放置在窗口中间，而在向下滚动并逐渐淡出之前，它们无法固定，直到到达下一个div。

也许我可以使用Waypoint.js在滚动中的某些点触发事件，但是如何使div居中并可见以实现视差效果？

演示 https://jsfiddle.net/fmub10pv/4/

编辑是否有可以实现我想要的插件（带有演示）？

编辑2所需的效果是这样的http://davegamache.com/parallax/

的HTML

<div class="container" id="firstContainer">
    <div class="row">
        <div class="col-md-12 text-center">
            <div id="firstDiv" class="animate text-center">
                <h1>First Div</h1>
            </div>
        </div>
    </div>
</div>

<div class="container" id="secondContainer">
    <div class="row">
        <div class="col-md-12 text-center">
            <div id="secondDiv" class="animate text-center">
                <h1>Second Div</h1>
            </div>
        </div>
    </div>
</div>

的CSS

    body {
        background-color: #16191b;
        color: white;
    }
    #firstContainer {
        height: 2000px;
        margin-top: 80px;
        background: darkslategrey;
    }
    #secondContainer {
        height: 1000px;
        background: darkslateblue;
    }
    .animate {
        padding: 20px;
        background: mediumseagreen;
    }
    #firstDiv {
        opacity: 1;
        -webkit-transition: all 0.5s ease-in-out;
        -moz-transition: all 0.5s ease-in-out;
        -ms-transition: all 0.5s ease-in-out;
        -o-transition: all 0.5s ease-in-out;
        transition: all 0.5s ease-in-out;
    }
    #secondDiv {
        opacity: 1;
        -webkit-transition: all 0.5s ease-in-out;
        -moz-transition: all 0.5s ease-in-out;
        -ms-transition: all 0.5s ease-in-out;
        -o-transition: all 0.5s ease-in-out;
        transition: all 0.5s ease-in-out;
    }

Java脚本

$(document).ready(function() {
    var current = $(window).scrollTop();
    var winHeight = $(window).height();
    var total = winHeight - current;

    $('#firstDiv').on('click', function() {
       if ($('#firstDiv').css('opacity') == 0) $('#firstDiv').css('opacity', 1);
       else $('#firstDiv').css('opacity', 0);
    });

    $('#secondDiv').on('click', function() {
       if ($('#secondDiv').css('opacity') == 0) $('#secondDiv').css('opacity', 1);
       else $('#secondDiv').css('opacity', 0);
    });
});

Answer 1

以下内容将检查您是否已通过某个航路点，并将不透明度更新为您随后滚动了多少。

您介意jQuery吗？

$(window).scroll(function() {
  waypoint = 400

  if ($(document).scrollTop() > waypoint) {
    alpha = 1 - (($(document).scrollTop() - waypoint) / 260) // 260 is an arbitrary number, the size determines how quickly it will fade out (reach 0)
  } else {
    alpha = 1
  }

  $("#fade").css({
    "opacity": alpha
  });
});

https://jsfiddle.net/mqk9xux6/

Answer 2

最初将fade-in类添加到第一个div

<div id="firstDiv" class="animate text-center fade-in">

以div为中心

#firstDiv,
#secondDiv {
  position: fixed;
  top: 20%;
  left: 0;
  right: 0;
  margin : 0 auto;
  height : 500px;
  width : 500px;
  transition: opacity 0.5s ease;
  opacity:0;
}

淡出滚动条

$(window).scroll(function (){
 var scrollPos = $(this).scrollTop();
 if(scrollPos >= 2000) 
  $("#firstDiv").removeClass("fade-in");
 if(scrollPos >= 2200)
  $("#secondDiv").addClass("fade-in");
}).scroll();

Answer 3

这可以通过创建一个使用fixed位置的类来实现，然后根据滚动偏移量将其应用于目标元素。 请注意， fixed位置不是块级元素，因此您还需要为其设置95%的宽度以匹配原始设计：

CSS：

.fixed {
  position: fixed;
  width: 95%;
}

jQuery的：

$(window).scroll(function() {
  if ($(document).scrollTop() > 2000) {
    $('#firstDiv').removeClass('fixed');
  } else if ($(document).scrollTop() <= 2000) {
    $('#firstDiv').addClass('fixed');
  }
});

在上面的示例中，我使用了2000px的偏移量。 这意味着第一个DIV将保持固定，直到与第二个DIV完全重叠。 向上滚动页面，第一个DIV将再次保持不变。 希望这是您想要的那种效果。

我在这里制作了一个小提琴来展示这一点 。

希望这可以帮助！ :)