与滚动相关的淡入和淡出文本一旦到达某个点

Question

我的文字有<p>和<h1>。文本以<h1>结尾。 当我到达文档的底部（最后一个h1位于页面的中间）时，我想加速<p>的Y翻译两倍，我希望h1保持不变在页面中间自己。 但是如果我向上滚动，我希望<p>向后滚动。

使用jQuery有一种简单的方法吗？ 我已经尝试了很多我在网上找到的解决方案，但没有什么令人满意的。

$(window).scroll(function(){

    var wScroll = $(document).scrollTop();
    var b = $(document).height() - $(window).height();
    var c = ($(document).height() - wScroll - $(window).height()) * 2;
    var fade = 1 + c / 100;
    var trigger = $('#last').offset().top - $(window).height() / 2;


    if(wScroll > b) {
      $(window).on('scroll', function() {
        $('p').css({
          'transform' : 'translateY('+ c +'px)',
          'opacity' : ''+ fade +''
        })
      })

    }

});

p, h1 {
  font-family: Baskerville;
  margin: auto;
  max-width: 650px;
  color: #333;
}

p {
  font-size: 21px;
  line-height: 33px;
  max-width: 650px;
  margin-top: 30px;
}

p:nth-child(2):first-letter {
  font-family: Arial;
  font-weight: 700;
  float: left;
  font-size: 72px;
  line-height: 63px;
  padding-right: 12px;
}

h1 {
  font-size: 47px;
  margin-top: 30px;
}

h1:last-child {
  margin-bottom: 0px;
}

.container {
  margin-top: 5%;
  margin-bottom: 50vh;
}

    <div class="container">
    <h1>Hello!</h1>

    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam ornare dictum ligula. Maecenas elementum suscipit nisl. Cras imperdiet leo ac felis dictum luctus. Pellentesque odio nisi, accumsan nec, scelerisque sed, consectetuer nec, justo. Sed tortor sapien, suscipit id, pulvinar vel, elementum id, lorem. Nullam consectetuer risus sit amet nibh. Vestibulum consectetuer, quam vitae euismod volutpat, magna magna consectetuer dui, et accumsan magna dui non nibh. Morbi adipiscing consequat erat. Vivamus quis massa eget orci fermentum laoreet. Morbi posuere purus. Duis feugiat lacus vel nisi. Aliquam ipsum felis, pretium sed, vehicula vel, dictum eget, nibh. Morbi turpis nulla, luctus viverra, pretium in, suscipit vitae, purus.</p>

    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam ornare dictum ligula. Maecenas elementum suscipit nisl. Cras imperdiet leo ac felis dictum luctus. Pellentesque odio nisi, accumsan nec, scelerisque sed, consectetuer nec, justo. Sed tortor sapien, suscipit id, pulvinar vel, elementum id, lorem. Nullam consectetuer risus sit amet nibh. Vestibulum consectetuer, quam vitae euismod volutpat, magna magna consectetuer dui, et accumsan magna dui non nibh. Morbi adipiscing consequat erat. Vivamus quis massa eget orci fermentum laoreet. Morbi posuere purus. Duis feugiat lacus vel nisi. Aliquam ipsum felis, pretium sed, vehicula vel, dictum eget, nibh. Morbi turpis nulla, luctus viverra, pretium in, suscipit vitae, purus.</p>

    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam ornare dictum ligula. Maecenas elementum suscipit nisl. Cras imperdiet leo ac felis dictum luctus. Pellentesque odio nisi, accumsan nec, scelerisque sed, consectetuer nec, justo. Sed tortor sapien, suscipit id, pulvinar vel, elementum id, lorem. Nullam consectetuer risus sit amet nibh. Vestibulum consectetuer, quam vitae euismod volutpat, magna magna consectetuer dui, et accumsan magna dui non nibh. Morbi adipiscing consequat erat. Vivamus quis massa eget orci fermentum laoreet. Morbi posuere purus. Duis feugiat lacus vel nisi. Aliquam ipsum felis, pretium sed, vehicula vel, dictum eget, nibh. Morbi turpis nulla, luctus viverra, pretium in, suscipit vitae, purus.</p>

    <h1 id="last">See ya!</h1>
    </div>
<script
  src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

Answer 1

这是第一步。 如果有人有更好的方法，我会接受它！

$(window).scroll(function(){

// Variables for last paragraph

  var wScroll = $(this).scrollTop();
  var bottom = ($(document).height() - wScroll - $(window).height()) / 2 ;
  var fade = bottom / 100;


  // Last paragraph: fading & scroll x 2

  if(wScroll > $('#last').offset().top - $(window).height()){

    var offset = wScroll - $('h1#last').offset().top + $(window).height();

    // Select all the p, h1 et h2 but not those with id='last'

    $('p, h1, h2').not('#last').css({
      'transform': 'translateY(-' + offset * 0.4 +'px)',
      'opacity' : fade
    });

  }
  });

p, h1 {
  font-family: Baskerville;
  margin: auto;
  max-width: 650px;
  color: #333;
}

p {
  font-size: 21px;
  line-height: 33px;
  max-width: 650px;
  margin-top: 30px;
}

p:nth-child(2):first-letter {
  font-family: Arial;
  font-weight: 700;
  float: left;
  font-size: 72px;
  line-height: 63px;
  padding-right: 12px;
}

h1 {
  font-size: 47px;
  margin-top: 30px;
}

h1:last-child {
  margin-bottom: 0px;
}

.container {
  margin-top: 5%;
  margin-bottom: 50vh;
}

   <div class="container">
    <h1>Hello!</h1>

    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam ornare dictum ligula. Maecenas elementum suscipit nisl. Cras imperdiet leo ac felis dictum luctus. Pellentesque odio nisi, accumsan nec, scelerisque sed, consectetuer nec, justo. Sed tortor sapien, suscipit id, pulvinar vel, elementum id, lorem. Nullam consectetuer risus sit amet nibh. Vestibulum consectetuer, quam vitae euismod volutpat, magna magna consectetuer dui, et accumsan magna dui non nibh. Morbi adipiscing consequat erat. Vivamus quis massa eget orci fermentum laoreet. Morbi posuere purus. Duis feugiat lacus vel nisi. Aliquam ipsum felis, pretium sed, vehicula vel, dictum eget, nibh. Morbi turpis nulla, luctus viverra, pretium in, suscipit vitae, purus.</p>

    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam ornare dictum ligula. Maecenas elementum suscipit nisl. Cras imperdiet leo ac felis dictum luctus. Pellentesque odio nisi, accumsan nec, scelerisque sed, consectetuer nec, justo. Sed tortor sapien, suscipit id, pulvinar vel, elementum id, lorem. Nullam consectetuer risus sit amet nibh. Vestibulum consectetuer, quam vitae euismod volutpat, magna magna consectetuer dui, et accumsan magna dui non nibh. Morbi adipiscing consequat erat. Vivamus quis massa eget orci fermentum laoreet. Morbi posuere purus. Duis feugiat lacus vel nisi. Aliquam ipsum felis, pretium sed, vehicula vel, dictum eget, nibh. Morbi turpis nulla, luctus viverra, pretium in, suscipit vitae, purus.</p>

    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam ornare dictum ligula. Maecenas elementum suscipit nisl. Cras imperdiet leo ac felis dictum luctus. Pellentesque odio nisi, accumsan nec, scelerisque sed, consectetuer nec, justo. Sed tortor sapien, suscipit id, pulvinar vel, elementum id, lorem. Nullam consectetuer risus sit amet nibh. Vestibulum consectetuer, quam vitae euismod volutpat, magna magna consectetuer dui, et accumsan magna dui non nibh. Morbi adipiscing consequat erat. Vivamus quis massa eget orci fermentum laoreet. Morbi posuere purus. Duis feugiat lacus vel nisi. Aliquam ipsum felis, pretium sed, vehicula vel, dictum eget, nibh. Morbi turpis nulla, luctus viverra, pretium in, suscipit vitae, purus.</p>

    <h1 id="last">See ya!</h1>
    </div>
<script
  src="https://code.jquery.com/jquery-3.2.1.min.js"></script>