jquery - 在某个 div 处停止滚动

Question

我想弄清楚如何在到达页面上的某个点后停止 div 滚动，但出于某种原因我无法让它工作。

这是当我一直滚动到页脚底部时显示的内容，但我希望它在到达部分 div 的末尾后停止

围绕整个部分的 div 是:

content

image

我的 jQuery:

   jQuery(function($) {
        var $el = $('#scroll'),
        top = $el.offset().top;

    $(window).scroll(function() {
        var pos = $(window).scrollTop();

        if (pos > top && !$el.hasClass('fixed')) {
          $el.addClass('fixed');
        } else if (pos < top && $el.hasClass('fixed')) {
            $el.removeClass('fixed');
        }

    });

    });

我的 CSS:

#scroll.fixed {
            position: fixed;
            top: 20%;
        }

        #scroll {
            position: absolute;
            top: 50px;
        }

我试过了

stopPosition = $('.content').offset().top;

但没有运气。

Answer 1

在此示例中，当您到达 .wrap 内的 div 时，滚动将停止 您必须获取该 div 的位置，并在每次向下滚动该 div 时将窗口设置到该位置

$(document).ready(function() {

  $(window).scroll(function() {

    var stopScroll = $('.wrap > div:nth-child(2)').offset().top;
    if ($(window).scrollTop() > $('.wrap div:nth-child(2)').offset().top) {
      $(window).scrollTop(stopScroll); /*this will stop the scroll to not go further down*/
    }

  });
})

body {
  font-family: 'Roboto', sans-serif;
  font-size: 30px;
  font-weight: 300;
  margin-top: 0;
}

header {
  width: 100%;
  height: 50px;
  line-height: 50px;
  position: fixed;
  font-size: 24px;
  font-weight: 700;
  color: #FFF;
  padding: 12px 0;
  margin: 0;
  background: #252525;
  transition: background 1s ease;
}

.wrap {
  padding-top: 74px;
  margin: 0;
}

.container {
  width: 960px;
  margin: 0 auto;
  overflow: hidden;
}

.block-1,
.block-2 {
  height: 500px;
  text-align: center;
}

p {
  margin-top: 185px;
}

.block-1 {
  background: #27AACC;
  color: #FFF;
}

.block-2 {
  background: #668E99;
  color: #FFF
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap">
  <div class="block-1">
    <div class="container">

    </div>
  </div>
  <div class="block-2">
    <div class="container">

    </div>
  </div>
  <div class="block-1">
    <div class="container">

    </div>
  </div>

</div>