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