一个 div 的内容完成后停止滚动，而另一个 div 继续滚动

Question

我希望col-md-4列在完成内容后停止滚动(例如Facebook的右侧边栏(。我已经尝试过jquery(在到达底部时添加一个固定的位置，但它不起作用(COL-MD-4 - 停止滚动一个内容完成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>

这就是我有类滚动Func的原因：

  $(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井之后，它应该停止。

Answer 1

这只是一个关于如何使用引导后缀插件进行集成的想法。你必须重新设计迷你设备。

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