Question

我有一个用bootstrap构建的页面，在这个页面中我有一行内容在顶部，然后另一行分为col-lg-3，col-lg-6，col-lg-3。我想要的是当我向下滚动它到达第二行以使col-lg-3（它们都是）固定并且只使col-lg-6可滚动时，我尝试将那里的位置设置为固定但是它没有工作，我怎么能这样做？这是我的代码：

＆＃13;

.greydiv {
  background-color: #eee;
  height: 450px;
}

.blackdiv {
  background-color: #000000;
  height: 800px;
}

.greendiv {
  background-color: #080;
  height: 450px;
}

＆＃13;

<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>

＆＃13;

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;
}

宽度应该是继承的，因此它会获得父宽度。

Answer 2

我希望我理解你的要求，所以：

当你通过jQuery点击浏览器顶部时，你可以修复这两个元素：

var $window = $(window);

$window.scroll(function() {
    if ( $window.scrollTop() >= $('.greydiv').offset().top ) {
         // div has reached the top
         $('.greydiv').addClass('someFixedClass');
    }
});

然后你必须用.someFixedClass

之类的方式设置position:fixed的样式

带有bootstrap

2 个答案: