停止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保持滚动

回答

相关问题