停止div滾動，一旦它的內容完成，而另一個div保持滾動

-1

我希望col-md-4列停止滾動，一旦它完成內容（如右側邊欄從facebook）。我已經嘗試過使用jQuery的東西（添加的位置固定的，當它到達底部，但它不工作） COL-MD-4 - 停止滾動一個內容完成 COL-MD-8 - 不斷滾動停止div滾動，一旦它的內容完成，而另一個div保持滾動

<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的原因：

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

https://i.stack.imgur.com/tlZs1.png 後，ASD以及它應該停止。

來源

2017-05-13 Belciug Ovidiu-Mihai

哪裏相應的CSS？ – Gacci

我在scrollFunc類中沒有任何內容。我用這個jquery函數。 –

嘗試使用'position：absolute'而不是使用'position：fixed'。 –

這只是一個關於如何使用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>

來源

2017-05-13 19:47:52

停止div滾動，一旦它的內容完成，而另一個div保持滾動

回答

相關問題