javascript - 带有 Bootstrap 的页面的可滚动部分

Question

我有一个用 Bootstrap 构建的页面，在这个页面中，我有一行内容在顶部，然后另一行分为 col-lg-3、col-lg-6、col-lg-3。 我想要的是当我向下滚动到第二行以固定 col-lg-3(它们两个)并仅使 col-lg-6 可滚动时，我尝试将那里的位置设置为固定但它没用，我该怎么做？这是我的代码:

.greydiv {
  background-color: #eee;
  height: 450px;
}

.blackdiv {
  background-color: #000000;
  height: 800px;
}

.greendiv {
  background-color: #080;
  height: 450px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
  <div class="col-lg-12">
    <p>Page content Page content Page content Page content Page content Page content Page content Page content Page content Page content Page content Page content Page content Page content Page content Page content Page content Page content Page content
      Page content Page content Page content Page content Page content Page content Page content Page content Page content Page content Page content Page content Page content Page content Page content Page content Page content Page content Page content
      Page content Page content Page content Page content Page content Page content Page content Page content Page content Page content Page content Page content Page content Page content Page content Page content Page content Page content Page content
      Page content Page content Page content Page content Page content Page content Page content Page content Page content Page content Page content Page content Page content Page content Page content Page content Page content Page content Page content
      Page content Page content Page content Page content Page content Page content Page content Page content Page content Page content Page content Page content Page content Page content Page content Page content Page content Page content Page content
      Page content Page content Page content Page content Page content Page content Page content Page content Page content Page content Page content Page content Page content Page content Page content Page content Page content Page content Page content
      </p>
  </div>
</div>
<div class="row">
  <div class="col-lg-3 col-xs-3">
    <div class="greydiv"></div>
  </div>
  <div class="col-lg-6 col-xs-6">
    <div class="blackdiv"></div>
  </div>
  <div class="col-lg-3 col-xs-3">
    <div class="greendiv"></div>
  </div>
</div>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

Answer 1

首先，当用户滚动到第二行时，您需要使用 javascript。

var $window = $(window);

$window.scroll(function() {
    if ( $window.scrollTop() >= $('.greydiv').offset().top ) {
         // we add a class fixed to col-lg-3 children
         $('.col-lg-3 div').addClass('fixed');
    }
});

接下来是为固定的 class 添加我们的 css 样式

.fixed{
      position:fixed!important;
      width: inherit;
}

宽度应该是继承的，所以它得到父宽度。