コンテンツが終了したらdivをスクロールし、他のdivはスクロールし続けます。

Question

col-md-4カラムの内容が終了すると、スクロールが止まります。私はすでに（それが底に達したときに固定位置を追加するが、それは働いていない）jQueryを使って何かをしようとした COL-MD-4 - 1つのコンテンツは COL-MD-8を終了スクロールを停止 -

<div class="row" style="margin-top:50px;"> 
     <div class="col-md-4 scrollFunc"> 
       <?php require 'includes/profile/description.php'; ?> 
       <?php require 'includes/profile/photos.php'; ?> 

       <div class="well"><h1>asd</h1></div> 
     </div> 
     <div class="col-md-8" style="padding-left: 5px !important;"> 
      <?php require 'includes/profile/posts.php'; ?> 
      <div id="displayPosts"> 

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

をスクロールし続けます

これは私がクラスscrollFuncを持っている理由です：それは停止する必要もASD後

$(window).scroll(function() { 
      if ($(window).scrollTop() > 226) { 
       $(".scrollFunc").addClass("fixed"); 
       console.log('asdad'); 
      } else { 
       $(".scrollFunc").removeClass("fixed"); 
      } 
    }); 

https://i.stack.imgur.com/tlZs1.png 。

Answer 1

これは、bootstrap affixプラグインを使用してどのように統合できるかについての単なるアイデアです。そして、あなたはミニデバイスを再設計しなければなりません。

$('#myAffix').affix({ 
 
    offset: { 
 
    top: 100, 
 
    bottom: function() { 
 
     return (this.bottom = $('.footer').outerHeight(true)) 
 
    } 
 
    } 
 
})

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

 
<div class="container"> 
 
    <div class="col-sm-4"> 
 
    <div class="leftside" id="myAffix"> 
 
     Left fixed side 
 
    </div> 
 
    </div> 
 
    <div class="col-sm-8"> 
 
    <div class="well well-sm">Right Side</div> 
 
    <div class="well well-sm">Right Side</div> 
 
    <div class="well well-sm">Right Side</div> 
 
    <div class="well well-sm">Right Side</div> 
 
    <div class="well well-sm">Right Side</div> 
 
    <div class="well well-sm">Right Side</div> 
 
    <div class="well well-sm">Right Side</div> 
 
    <div class="well well-sm">Right Side</div> 
 
    <div class="well well-sm">Right Side</div> 
 
    <div class="well well-sm">Right Side</div> 
 
    <div class="well well-sm">Right Side</div> 
 
    </div> 
 
</div>