javascript - 当部分到达顶部然后固定左侧 div 并向右滚动 div 直到部分结束

Question

我必须在到达顶部时固定显示左列，而右 div 将滚动。一旦该部分结束，left div 将相对更改它，以便它也将滚动到该部分的末尾。

我试过下面的代码，但它对我来说并不完美。它也在改变宽度。

我尝试了 if ($(window).scrollTop() >= 350) { 这并不完美。当滚动达到 350 时它处于事件状态。我需要当我的部分到达顶部然后固定左侧 div 并滚动右侧 div。

$(function() {
  $(window).scroll(function() {
    //After scrolling 100px from the top...
    if ($(window).scrollTop() >= 350) {
      $('.leftDiv').css('position', 'fixed');
      $('.leftDiv').css('top', '0px');
      //Otherwise remove inline styles and thereby revert to original stying
    } else {
      $('.leftDiv').css('position', 'static');
    }
  });
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<section>
  <div class="container">
    <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam congue pretium quam id aliquet. Maecenas feugiat augue sed suscipit pulvinar. Mauris at pharetra libero, vel efficitur mi. Proin vel neque laoreet, dictum augue faucibus, molestie risus.
      Suspendisse vitae elit enim. Curabitur lobortis hendrerit eros, ac commodo sapien efficitur et. Praesent quis vehicula nisi. Aenean gravida lacus dolor, at vehicula eros accumsan facilisis. Proin posuere, magna sit amet maximus pretium, velit dui
      pretium nisi, ut fringilla mauris diam ut nulla. Nullam rhoncus nunc id mauris vulputate, a tincidunt ligula posuere. Nunc sed tortor eget augue sollicitudin mattis. Pellentesque interdum fringilla risus in iaculis. Proin facilisis turpis sed urna
      tempor, ac hendrerit sem tristique. Donec rutrum gravida ultricies. Morbi eleifend a turpis et convallis. Morbi sed felis a tortor maximus lobortis non sit amet ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos
      himenaeos. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse a nisl at nulla fringilla egestas. Phasellus ac libero nisl. Nullam quis lacus quis arcu consequat bibendum. Phasellus faucibus ornare nisl. Quisque mollis est
      nulla, eget aliquam nisi dignissim quis. Donec semper euismod elit sed tristique. Etiam ut purus pulvinar, dictum eros ultricies, elementum libero. Nulla vulputate mauris at venenatis gravida. Praesent efficitur maximus enim non mollis. Aenean finibus
      urna ipsum, id aliquet odio venenatis vel. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a euismod lectus, viverra fermentum leo. Maecenas vulputate, ante id tempus pharetra, eros ligula ornare magna, eu egestas arcu sapien vel dui.
      Proin ligula erat, vestibulum malesuada egestas molestie, accumsan porta leo. Duis lacinia, sem in dapibus bibendum, libero erat venenatis ligula, nec vestibulum nisi est eu leo. Nulla sodales ex non vestibulum pellentesque. </p>
  </div>
</section>
<section>
  <div class="container">
    <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam congue pretium quam id aliquet. Maecenas feugiat augue sed suscipit pulvinar. Mauris at pharetra libero, vel efficitur mi. Proin vel neque laoreet, dictum augue faucibus, molestie risus.
      Suspendisse vitae elit enim. Curabitur lobortis hendrerit eros, ac commodo sapien efficitur et. Praesent quis vehicula nisi. Aenean gravida lacus dolor, at vehicula eros accumsan facilisis. Proin posuere, magna sit amet maximus pretium, velit dui
      pretium nisi, ut fringilla mauris diam ut nulla. Nullam rhoncus nunc id mauris vulputate, a tincidunt ligula posuere. Nunc sed tortor eget augue sollicitudin mattis. Pellentesque interdum fringilla risus in iaculis. Proin facilisis turpis sed urna
      tempor, ac hendrerit sem tristique. Donec rutrum gravida ultricies. Morbi eleifend a turpis et convallis. Morbi sed felis a tortor maximus lobortis non sit amet ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos
      himenaeos. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse a nisl at nulla fringilla egestas. Phasellus ac libero nisl. Nullam quis lacus quis arcu consequat bibendum. Phasellus faucibus ornare nisl. Quisque mollis est
      nulla, eget aliquam nisi dignissim quis. Donec semper euismod elit sed tristique. Etiam ut purus pulvinar, dictum eros ultricies, elementum libero. Nulla vulputate mauris at venenatis gravida. Praesent efficitur maximus enim non mollis. Aenean finibus
      urna ipsum, id aliquet odio venenatis vel. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a euismod lectus, viverra fermentum leo. Maecenas vulputate, ante id tempus pharetra, eros ligula ornare magna, eu egestas arcu sapien vel dui.
      Proin ligula erat, vestibulum malesuada egestas molestie, accumsan porta leo. Duis lacinia, sem in dapibus bibendum, libero erat venenatis ligula, nec vestibulum nisi est eu leo. Nulla sodales ex non vestibulum pellentesque. </p>
  </div>
</section>
<section>
  <div class="container">
    <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam congue pretium quam id aliquet. Maecenas feugiat augue sed suscipit pulvinar. Mauris at pharetra libero, vel efficitur mi. Proin vel neque laoreet, dictum augue faucibus, molestie risus.
      Suspendisse vitae elit enim. Curabitur lobortis hendrerit eros, ac commodo sapien efficitur et. Praesent quis vehicula nisi. Aenean gravida lacus dolor, at vehicula eros accumsan facilisis. Proin posuere, magna sit amet maximus pretium, velit dui
      pretium nisi, ut fringilla mauris diam ut nulla. Nullam rhoncus nunc id mauris vulputate, a tincidunt ligula posuere. Nunc sed tortor eget augue sollicitudin mattis. Pellentesque interdum fringilla risus in iaculis. Proin facilisis turpis sed urna
      tempor, ac hendrerit sem tristique. Donec rutrum gravida ultricies. Morbi eleifend a turpis et convallis. Morbi sed felis a tortor maximus lobortis non sit amet ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos
      himenaeos. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse a nisl at nulla fringilla egestas. Phasellus ac libero nisl. Nullam quis lacus quis arcu consequat bibendum. Phasellus faucibus ornare nisl. Quisque mollis est
      nulla, eget aliquam nisi dignissim quis. Donec semper euismod elit sed tristique. Etiam ut purus pulvinar, dictum eros ultricies, elementum libero. Nulla vulputate mauris at venenatis gravida. Praesent efficitur maximus enim non mollis. Aenean finibus
      urna ipsum, id aliquet odio venenatis vel. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a euismod lectus, viverra fermentum leo. Maecenas vulputate, ante id tempus pharetra, eros ligula ornare magna, eu egestas arcu sapien vel dui.
      Proin ligula erat, vestibulum malesuada egestas molestie, accumsan porta leo. Duis lacinia, sem in dapibus bibendum, libero erat venenatis ligula, nec vestibulum nisi est eu leo. Nulla sodales ex non vestibulum pellentesque. </p>
  </div>
</section>

<section>
  <div class="container">
    <div class="row">

      <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
        <div class="leftDiv">
          <h2>This div will fixed once touch the top bar and scroll right div</h2>
          <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,</p>
        </div>
      </div>

      <div class="col-lg-8 col-md-8 col-sm-8 col-xs-12">
        <div class="rightDiv">
          <h2>Lorem Ipsum is simply dummy text</h2>
          <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,</p>
          <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam congue pretium quam id aliquet. Maecenas feugiat augue sed suscipit pulvinar. Mauris at pharetra libero, vel efficitur mi. Proin vel neque laoreet, dictum augue faucibus, molestie
            risus. Suspendisse vitae elit enim. Curabitur lobortis hendrerit eros, ac commodo sapien efficitur et. Praesent quis vehicula nisi. Aenean gravida lacus dolor, at vehicula eros accumsan facilisis. Proin posuere, magna sit amet maximus pretium,
            velit dui pretium nisi, ut fringilla mauris diam ut nulla. Nullam rhoncus nunc id mauris vulputate, a tincidunt ligula posuere. Nunc sed tortor eget augue sollicitudin mattis. Pellentesque interdum fringilla risus in iaculis. Proin facilisis
            turpis sed urna tempor, ac hendrerit sem tristique. Donec rutrum gravida ultricies. Morbi eleifend a turpis et convallis. Morbi sed felis a tortor maximus lobortis non sit amet ante. Class aptent taciti sociosqu ad litora torquent per conubia
            nostra, per inceptos himenaeos. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse a nisl at nulla fringilla egestas. Phasellus ac libero nisl. Nullam quis lacus quis arcu consequat bibendum. Phasellus faucibus ornare
            nisl. Quisque mollis est nulla, eget aliquam nisi dignissim quis. Donec semper euismod elit sed tristique. Etiam ut purus pulvinar, dictum eros ultricies, elementum libero. Nulla vulputate mauris at venenatis gravida. Praesent efficitur maximus
            enim non mollis. Aenean finibus urna ipsum, id aliquet odio venenatis vel. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a euismod lectus, viverra fermentum leo. Maecenas vulputate, ante id tempus pharetra, eros ligula ornare
            magna, eu egestas arcu sapien vel dui. Proin ligula erat, vestibulum malesuada egestas molestie, accumsan porta leo. Duis lacinia, sem in dapibus bibendum, libero erat venenatis ligula, nec vestibulum nisi est eu leo. Nulla sodales ex non
            vestibulum pellentesque. </p>
          <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam congue pretium quam id aliquet. Maecenas feugiat augue sed suscipit pulvinar. Mauris at pharetra libero, vel efficitur mi. Proin vel neque laoreet, dictum augue faucibus, molestie
            risus. Suspendisse vitae elit enim. Curabitur lobortis hendrerit eros, ac commodo sapien efficitur et. Praesent quis vehicula nisi. Aenean gravida lacus dolor, at vehicula eros accumsan facilisis. Proin posuere, magna sit amet maximus pretium,
            velit dui pretium nisi, ut fringilla mauris diam ut nulla. Nullam rhoncus nunc id mauris vulputate, a tincidunt ligula posuere. Nunc sed tortor eget augue sollicitudin mattis. Pellentesque interdum fringilla risus in iaculis. Proin facilisis
            turpis sed urna tempor, ac hendrerit sem tristique. Donec rutrum gravida ultricies. Morbi eleifend a turpis et convallis. Morbi sed felis a tortor maximus lobortis non sit amet ante. Class aptent taciti sociosqu ad litora torquent per conubia
            nostra, per inceptos himenaeos. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse a nisl at nulla fringilla egestas. Phasellus ac libero nisl. Nullam quis lacus quis arcu consequat bibendum. Phasellus faucibus ornare
            nisl. Quisque mollis est nulla, eget aliquam nisi dignissim quis. Donec semper euismod elit sed tristique. Etiam ut purus pulvinar, dictum eros ultricies, elementum libero. Nulla vulputate mauris at venenatis gravida. Praesent efficitur maximus
            enim non mollis. Aenean finibus urna ipsum, id aliquet odio venenatis vel. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a euismod lectus, viverra fermentum leo. Maecenas vulputate, ante id tempus pharetra, eros ligula ornare
            magna, eu egestas arcu sapien vel dui. Proin ligula erat, vestibulum malesuada egestas molestie, accumsan porta leo. Duis lacinia, sem in dapibus bibendum, libero erat venenatis ligula, nec vestibulum nisi est eu leo. Nulla sodales ex non
            vestibulum pellentesque. </p>
        </div>
      </div>




    </div>
  </div>
</section>


<section>
  <div class="container">
    <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam congue pretium quam id aliquet. Maecenas feugiat augue sed suscipit pulvinar. Mauris at pharetra libero, vel efficitur mi. Proin vel neque laoreet, dictum augue faucibus, molestie risus.
      Suspendisse vitae elit enim. Curabitur lobortis hendrerit eros, ac commodo sapien efficitur et. Praesent quis vehicula nisi. Aenean gravida lacus dolor, at vehicula eros accumsan facilisis. Proin posuere, magna sit amet maximus pretium, velit dui
      pretium nisi, ut fringilla mauris diam ut nulla. Nullam rhoncus nunc id mauris vulputate, a tincidunt ligula posuere. Nunc sed tortor eget augue sollicitudin mattis. Pellentesque interdum fringilla risus in iaculis. Proin facilisis turpis sed urna
      tempor, ac hendrerit sem tristique. Donec rutrum gravida ultricies. Morbi eleifend a turpis et convallis. Morbi sed felis a tortor maximus lobortis non sit amet ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos
      himenaeos. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse a nisl at nulla fringilla egestas. Phasellus ac libero nisl. Nullam quis lacus quis arcu consequat bibendum. Phasellus faucibus ornare nisl. Quisque mollis est
      nulla, eget aliquam nisi dignissim quis. Donec semper euismod elit sed tristique. Etiam ut purus pulvinar, dictum eros ultricies, elementum libero. Nulla vulputate mauris at venenatis gravida. Praesent efficitur maximus enim non mollis. Aenean finibus
      urna ipsum, id aliquet odio venenatis vel. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a euismod lectus, viverra fermentum leo. Maecenas vulputate, ante id tempus pharetra, eros ligula ornare magna, eu egestas arcu sapien vel dui.
      Proin ligula erat, vestibulum malesuada egestas molestie, accumsan porta leo. Duis lacinia, sem in dapibus bibendum, libero erat venenatis ligula, nec vestibulum nisi est eu leo. Nulla sodales ex non vestibulum pellentesque. </p>
  </div>
</section>
<section>
  <div class="container">
    <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam congue pretium quam id aliquet. Maecenas feugiat augue sed suscipit pulvinar. Mauris at pharetra libero, vel efficitur mi. Proin vel neque laoreet, dictum augue faucibus, molestie risus.
      Suspendisse vitae elit enim. Curabitur lobortis hendrerit eros, ac commodo sapien efficitur et. Praesent quis vehicula nisi. Aenean gravida lacus dolor, at vehicula eros accumsan facilisis. Proin posuere, magna sit amet maximus pretium, velit dui
      pretium nisi, ut fringilla mauris diam ut nulla. Nullam rhoncus nunc id mauris vulputate, a tincidunt ligula posuere. Nunc sed tortor eget augue sollicitudin mattis. Pellentesque interdum fringilla risus in iaculis. Proin facilisis turpis sed urna
      tempor, ac hendrerit sem tristique. Donec rutrum gravida ultricies. Morbi eleifend a turpis et convallis. Morbi sed felis a tortor maximus lobortis non sit amet ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos
      himenaeos. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse a nisl at nulla fringilla egestas. Phasellus ac libero nisl. Nullam quis lacus quis arcu consequat bibendum. Donec rutrum gravida ultricies. Morbi eleifend a turpis
      et convallis. Morbi sed felis a tortor maximus lobortis non sit amet ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse a nisl
      at nulla fringilla egestas. Phasellus ac libero nisl. Nullam quis lacus quis arcu consequat bibendum. Donec rutrum gravida ultricies. Morbi eleifend a turpis et convallis. Morbi sed felis a tortor maximus lobortis non sit amet ante. Class aptent
      taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse a nisl at nulla fringilla egestas. Phasellus ac libero nisl. Nullam quis lacus quis arcu consequat
      bibendum. Donec rutrum gravida ultricies. Morbi eleifend a turpis et convallis. Morbi sed felis a tortor maximus lobortis non sit amet ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Interdum et
      malesuada fames ac ante ipsum primis in faucibus. Suspendisse a nisl at nulla fringilla egestas. Phasellus ac libero nisl. Nullam quis lacus quis arcu consequat bibendum. Phasellus faucibus ornare nisl. Quisque mollis est nulla, eget aliquam nisi
      dignissim quis. Donec semper euismod elit sed tristique. Etiam ut purus pulvinar, dictum eros ultricies, elementum libero. Nulla vulputate mauris at venenatis gravida. Praesent efficitur maximus enim non mollis. Aenean finibus urna ipsum, id aliquet
      odio venenatis vel. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a euismod lectus, viverra fermentum leo. Maecenas vulputate, ante id tempus pharetra, eros ligula ornare magna, eu egestas arcu sapien vel dui. Proin ligula erat, vestibulum
      malesuada egestas molestie, accumsan porta leo. Duis lacinia, sem in dapibus bibendum, libero erat venenatis ligula, nec vestibulum nisi est eu leo. Nulla sodales ex non vestibulum pellentesque. </p>
  </div>
</section>

Answer 1

在页面加载时，使用 .offset() 找到页面中的元素位置，它的宽度，使用 .width() .

此外，您还可以一次传递多个 CSS 属性，使用 .css() ，如果您将它们格式化为对象(见下文)。

现在...您还必须关心下面的下一行...因此，一个简单的数学运算将比较 scrollTop，以便在下一行出现时立即“取消修复”div。即 scrollTop + 行高 - div 的高度。

$(function() {

  // Get position and width
  var position = $(".leftDiv").offset().top;
  var width = $(".leftDiv").width();

  // Get the height and the row height
  var height = $(".leftDiv").height();
  var row_height = $(".leftDiv").parents(".row").height();

  $(window).scroll(function() {

    // Compare scrollTop with the div position
    if ($(window).scrollTop() >= position && $(window).scrollTop() <= position + row_height - height) {
      $('.leftDiv').css({
        position: 'fixed',
        top: 0,
        width: width // Ensure to keep its width
      });

      //Otherwise remove inline styles and thereby revert to original stying
    } else {
      $('.leftDiv').css({
        position: 'static'
      });
    }
  });

  // Resize issue... Since the width has been set once
  $(window).on("resize", function() {

    // Remove the width and position properties to redefine all variables
    $(".leftDiv").css({
      position: 'static',
      width: "initial"
    });

    // Get position and width
    position = $(".leftDiv").offset().top;
    width = $(".leftDiv").width();

    // Get the height and the row height
    height = $(".leftDiv").height();
    row_height = $(".leftDiv").parents(".row").height();

    // Run the scroll adjusments...
    $(window).trigger("scroll");
  });

});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<section>
  <div class="container">
    <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam congue pretium quam id aliquet. Maecenas feugiat augue sed suscipit pulvinar. Mauris at pharetra libero, vel efficitur mi. Proin vel neque laoreet, dictum augue faucibus, molestie risus.
      Suspendisse vitae elit enim. Curabitur lobortis hendrerit eros, ac commodo sapien efficitur et. Praesent quis vehicula nisi. Aenean gravida lacus dolor, at vehicula eros accumsan facilisis. Proin posuere, magna sit amet maximus pretium, velit dui
      pretium nisi, ut fringilla mauris diam ut nulla. Nullam rhoncus nunc id mauris vulputate, a tincidunt ligula posuere. Nunc sed tortor eget augue sollicitudin mattis. Pellentesque interdum fringilla risus in iaculis. Proin facilisis turpis sed urna
      tempor, ac hendrerit sem tristique. Donec rutrum gravida ultricies. Morbi eleifend a turpis et convallis. Morbi sed felis a tortor maximus lobortis non sit amet ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos
      himenaeos. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse a nisl at nulla fringilla egestas. Phasellus ac libero nisl. Nullam quis lacus quis arcu consequat bibendum. Phasellus faucibus ornare nisl. Quisque mollis est
      nulla, eget aliquam nisi dignissim quis. Donec semper euismod elit sed tristique. Etiam ut purus pulvinar, dictum eros ultricies, elementum libero. Nulla vulputate mauris at venenatis gravida. Praesent efficitur maximus enim non mollis. Aenean finibus
      urna ipsum, id aliquet odio venenatis vel. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a euismod lectus, viverra fermentum leo. Maecenas vulputate, ante id tempus pharetra, eros ligula ornare magna, eu egestas arcu sapien vel dui.
      Proin ligula erat, vestibulum malesuada egestas molestie, accumsan porta leo. Duis lacinia, sem in dapibus bibendum, libero erat venenatis ligula, nec vestibulum nisi est eu leo. Nulla sodales ex non vestibulum pellentesque. </p>
  </div>
</section>
<section>
  <div class="container">
    <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam congue pretium quam id aliquet. Maecenas feugiat augue sed suscipit pulvinar. Mauris at pharetra libero, vel efficitur mi. Proin vel neque laoreet, dictum augue faucibus, molestie risus.
      Suspendisse vitae elit enim. Curabitur lobortis hendrerit eros, ac commodo sapien efficitur et. Praesent quis vehicula nisi. Aenean gravida lacus dolor, at vehicula eros accumsan facilisis. Proin posuere, magna sit amet maximus pretium, velit dui
      pretium nisi, ut fringilla mauris diam ut nulla. Nullam rhoncus nunc id mauris vulputate, a tincidunt ligula posuere. Nunc sed tortor eget augue sollicitudin mattis. Pellentesque interdum fringilla risus in iaculis. Proin facilisis turpis sed urna
      tempor, ac hendrerit sem tristique. Donec rutrum gravida ultricies. Morbi eleifend a turpis et convallis. Morbi sed felis a tortor maximus lobortis non sit amet ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos
      himenaeos. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse a nisl at nulla fringilla egestas. Phasellus ac libero nisl. Nullam quis lacus quis arcu consequat bibendum. Phasellus faucibus ornare nisl. Quisque mollis est
      nulla, eget aliquam nisi dignissim quis. Donec semper euismod elit sed tristique. Etiam ut purus pulvinar, dictum eros ultricies, elementum libero. Nulla vulputate mauris at venenatis gravida. Praesent efficitur maximus enim non mollis. Aenean finibus
      urna ipsum, id aliquet odio venenatis vel. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a euismod lectus, viverra fermentum leo. Maecenas vulputate, ante id tempus pharetra, eros ligula ornare magna, eu egestas arcu sapien vel dui.
      Proin ligula erat, vestibulum malesuada egestas molestie, accumsan porta leo. Duis lacinia, sem in dapibus bibendum, libero erat venenatis ligula, nec vestibulum nisi est eu leo. Nulla sodales ex non vestibulum pellentesque. </p>
  </div>
</section>
<section>
  <div class="container">
    <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam congue pretium quam id aliquet. Maecenas feugiat augue sed suscipit pulvinar. Mauris at pharetra libero, vel efficitur mi. Proin vel neque laoreet, dictum augue faucibus, molestie risus.
      Suspendisse vitae elit enim. Curabitur lobortis hendrerit eros, ac commodo sapien efficitur et. Praesent quis vehicula nisi. Aenean gravida lacus dolor, at vehicula eros accumsan facilisis. Proin posuere, magna sit amet maximus pretium, velit dui
      pretium nisi, ut fringilla mauris diam ut nulla. Nullam rhoncus nunc id mauris vulputate, a tincidunt ligula posuere. Nunc sed tortor eget augue sollicitudin mattis. Pellentesque interdum fringilla risus in iaculis. Proin facilisis turpis sed urna
      tempor, ac hendrerit sem tristique. Donec rutrum gravida ultricies. Morbi eleifend a turpis et convallis. Morbi sed felis a tortor maximus lobortis non sit amet ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos
      himenaeos. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse a nisl at nulla fringilla egestas. Phasellus ac libero nisl. Nullam quis lacus quis arcu consequat bibendum. Phasellus faucibus ornare nisl. Quisque mollis est
      nulla, eget aliquam nisi dignissim quis. Donec semper euismod elit sed tristique. Etiam ut purus pulvinar, dictum eros ultricies, elementum libero. Nulla vulputate mauris at venenatis gravida. Praesent efficitur maximus enim non mollis. Aenean finibus
      urna ipsum, id aliquet odio venenatis vel. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a euismod lectus, viverra fermentum leo. Maecenas vulputate, ante id tempus pharetra, eros ligula ornare magna, eu egestas arcu sapien vel dui.
      Proin ligula erat, vestibulum malesuada egestas molestie, accumsan porta leo. Duis lacinia, sem in dapibus bibendum, libero erat venenatis ligula, nec vestibulum nisi est eu leo. Nulla sodales ex non vestibulum pellentesque. </p>
  </div>
</section>

<section>
  <div class="container">
    <div class="row">

      <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
        <div class="leftDiv">
          <h2>This div will fixed once touch the top bar and scroll right div</h2>
          <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,</p>
        </div>
      </div>

      <div class="col-lg-8 col-md-8 col-sm-8 col-xs-12">
        <div class="rightDiv">
          <h2>Lorem Ipsum is simply dummy text</h2>
          <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,</p>
          <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam congue pretium quam id aliquet. Maecenas feugiat augue sed suscipit pulvinar. Mauris at pharetra libero, vel efficitur mi. Proin vel neque laoreet, dictum augue faucibus, molestie
            risus. Suspendisse vitae elit enim. Curabitur lobortis hendrerit eros, ac commodo sapien efficitur et. Praesent quis vehicula nisi. Aenean gravida lacus dolor, at vehicula eros accumsan facilisis. Proin posuere, magna sit amet maximus pretium,
            velit dui pretium nisi, ut fringilla mauris diam ut nulla. Nullam rhoncus nunc id mauris vulputate, a tincidunt ligula posuere. Nunc sed tortor eget augue sollicitudin mattis. Pellentesque interdum fringilla risus in iaculis. Proin facilisis
            turpis sed urna tempor, ac hendrerit sem tristique. Donec rutrum gravida ultricies. Morbi eleifend a turpis et convallis. Morbi sed felis a tortor maximus lobortis non sit amet ante. Class aptent taciti sociosqu ad litora torquent per conubia
            nostra, per inceptos himenaeos. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse a nisl at nulla fringilla egestas. Phasellus ac libero nisl. Nullam quis lacus quis arcu consequat bibendum. Phasellus faucibus ornare
            nisl. Quisque mollis est nulla, eget aliquam nisi dignissim quis. Donec semper euismod elit sed tristique. Etiam ut purus pulvinar, dictum eros ultricies, elementum libero. Nulla vulputate mauris at venenatis gravida. Praesent efficitur maximus
            enim non mollis. Aenean finibus urna ipsum, id aliquet odio venenatis vel. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a euismod lectus, viverra fermentum leo. Maecenas vulputate, ante id tempus pharetra, eros ligula ornare
            magna, eu egestas arcu sapien vel dui. Proin ligula erat, vestibulum malesuada egestas molestie, accumsan porta leo. Duis lacinia, sem in dapibus bibendum, libero erat venenatis ligula, nec vestibulum nisi est eu leo. Nulla sodales ex non
            vestibulum pellentesque. </p>
          <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam congue pretium quam id aliquet. Maecenas feugiat augue sed suscipit pulvinar. Mauris at pharetra libero, vel efficitur mi. Proin vel neque laoreet, dictum augue faucibus, molestie
            risus. Suspendisse vitae elit enim. Curabitur lobortis hendrerit eros, ac commodo sapien efficitur et. Praesent quis vehicula nisi. Aenean gravida lacus dolor, at vehicula eros accumsan facilisis. Proin posuere, magna sit amet maximus pretium,
            velit dui pretium nisi, ut fringilla mauris diam ut nulla. Nullam rhoncus nunc id mauris vulputate, a tincidunt ligula posuere. Nunc sed tortor eget augue sollicitudin mattis. Pellentesque interdum fringilla risus in iaculis. Proin facilisis
            turpis sed urna tempor, ac hendrerit sem tristique. Donec rutrum gravida ultricies. Morbi eleifend a turpis et convallis. Morbi sed felis a tortor maximus lobortis non sit amet ante. Class aptent taciti sociosqu ad litora torquent per conubia
            nostra, per inceptos himenaeos. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse a nisl at nulla fringilla egestas. Phasellus ac libero nisl. Nullam quis lacus quis arcu consequat bibendum. Phasellus faucibus ornare
            nisl. Quisque mollis est nulla, eget aliquam nisi dignissim quis. Donec semper euismod elit sed tristique. Etiam ut purus pulvinar, dictum eros ultricies, elementum libero. Nulla vulputate mauris at venenatis gravida. Praesent efficitur maximus
            enim non mollis. Aenean finibus urna ipsum, id aliquet odio venenatis vel. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a euismod lectus, viverra fermentum leo. Maecenas vulputate, ante id tempus pharetra, eros ligula ornare
            magna, eu egestas arcu sapien vel dui. Proin ligula erat, vestibulum malesuada egestas molestie, accumsan porta leo. Duis lacinia, sem in dapibus bibendum, libero erat venenatis ligula, nec vestibulum nisi est eu leo. Nulla sodales ex non
            vestibulum pellentesque. </p>
        </div>
      </div>




    </div>
  </div>
</section>


<section>
  <div class="container">
    <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam congue pretium quam id aliquet. Maecenas feugiat augue sed suscipit pulvinar. Mauris at pharetra libero, vel efficitur mi. Proin vel neque laoreet, dictum augue faucibus, molestie risus.
      Suspendisse vitae elit enim. Curabitur lobortis hendrerit eros, ac commodo sapien efficitur et. Praesent quis vehicula nisi. Aenean gravida lacus dolor, at vehicula eros accumsan facilisis. Proin posuere, magna sit amet maximus pretium, velit dui
      pretium nisi, ut fringilla mauris diam ut nulla. Nullam rhoncus nunc id mauris vulputate, a tincidunt ligula posuere. Nunc sed tortor eget augue sollicitudin mattis. Pellentesque interdum fringilla risus in iaculis. Proin facilisis turpis sed urna
      tempor, ac hendrerit sem tristique. Donec rutrum gravida ultricies. Morbi eleifend a turpis et convallis. Morbi sed felis a tortor maximus lobortis non sit amet ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos
      himenaeos. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse a nisl at nulla fringilla egestas. Phasellus ac libero nisl. Nullam quis lacus quis arcu consequat bibendum. Phasellus faucibus ornare nisl. Quisque mollis est
      nulla, eget aliquam nisi dignissim quis. Donec semper euismod elit sed tristique. Etiam ut purus pulvinar, dictum eros ultricies, elementum libero. Nulla vulputate mauris at venenatis gravida. Praesent efficitur maximus enim non mollis. Aenean finibus
      urna ipsum, id aliquet odio venenatis vel. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a euismod lectus, viverra fermentum leo. Maecenas vulputate, ante id tempus pharetra, eros ligula ornare magna, eu egestas arcu sapien vel dui.
      Proin ligula erat, vestibulum malesuada egestas molestie, accumsan porta leo. Duis lacinia, sem in dapibus bibendum, libero erat venenatis ligula, nec vestibulum nisi est eu leo. Nulla sodales ex non vestibulum pellentesque. </p>
  </div>
</section>
<section>
  <div class="container">
    <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam congue pretium quam id aliquet. Maecenas feugiat augue sed suscipit pulvinar. Mauris at pharetra libero, vel efficitur mi. Proin vel neque laoreet, dictum augue faucibus, molestie risus.
      Suspendisse vitae elit enim. Curabitur lobortis hendrerit eros, ac commodo sapien efficitur et. Praesent quis vehicula nisi. Aenean gravida lacus dolor, at vehicula eros accumsan facilisis. Proin posuere, magna sit amet maximus pretium, velit dui
      pretium nisi, ut fringilla mauris diam ut nulla. Nullam rhoncus nunc id mauris vulputate, a tincidunt ligula posuere. Nunc sed tortor eget augue sollicitudin mattis. Pellentesque interdum fringilla risus in iaculis. Proin facilisis turpis sed urna
      tempor, ac hendrerit sem tristique. Donec rutrum gravida ultricies. Morbi eleifend a turpis et convallis. Morbi sed felis a tortor maximus lobortis non sit amet ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos
      himenaeos. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse a nisl at nulla fringilla egestas. Phasellus ac libero nisl. Nullam quis lacus quis arcu consequat bibendum. Donec rutrum gravida ultricies. Morbi eleifend a turpis
      et convallis. Morbi sed felis a tortor maximus lobortis non sit amet ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse a nisl
      at nulla fringilla egestas. Phasellus ac libero nisl. Nullam quis lacus quis arcu consequat bibendum. Donec rutrum gravida ultricies. Morbi eleifend a turpis et convallis. Morbi sed felis a tortor maximus lobortis non sit amet ante. Class aptent
      taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse a nisl at nulla fringilla egestas. Phasellus ac libero nisl. Nullam quis lacus quis arcu consequat
      bibendum. Donec rutrum gravida ultricies. Morbi eleifend a turpis et convallis. Morbi sed felis a tortor maximus lobortis non sit amet ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Interdum et
      malesuada fames ac ante ipsum primis in faucibus. Suspendisse a nisl at nulla fringilla egestas. Phasellus ac libero nisl. Nullam quis lacus quis arcu consequat bibendum. Phasellus faucibus ornare nisl. Quisque mollis est nulla, eget aliquam nisi
      dignissim quis. Donec semper euismod elit sed tristique. Etiam ut purus pulvinar, dictum eros ultricies, elementum libero. Nulla vulputate mauris at venenatis gravida. Praesent efficitur maximus enim non mollis. Aenean finibus urna ipsum, id aliquet
      odio venenatis vel. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a euismod lectus, viverra fermentum leo. Maecenas vulputate, ante id tempus pharetra, eros ligula ornare magna, eu egestas arcu sapien vel dui. Proin ligula erat, vestibulum
      malesuada egestas molestie, accumsan porta leo. Duis lacinia, sem in dapibus bibendum, libero erat venenatis ligula, nec vestibulum nisi est eu leo. Nulla sodales ex non vestibulum pellentesque. </p>
  </div>
</section>

有趣的“奖金问题”

Can I use some animation at the end when the section ends because left content directly goes off?

由于这是一个“额外问题”...而且有点复杂，我将只在 CodePen 上发布它.

快速解释:您必须确保动画只触发一次。所以我使用了一个类，它会立即被删除...而 position 只会在动画结束时更改为 static。

此外，只有当滚动位于行的底部时，动画才有趣......在顶部看起来很奇怪。