停止在某个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

时间设定到该位置

$(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>