代码之家 › 专栏 › 技术社区 › jessica

带有引导的页面可滚动部分

twitter-bootstrap css html jquery javascript

jessica · 技术社区 · 8 年前

我有一个用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>

2 回复 | 直到 8 年前

Edison Biba 8 年前

首先,当用户在滚动时到达第二行时,需要使用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');
    }
});

下一步是添加css样式以修复 class

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

宽度应为inherit,以便获得父宽度。

Jax-p 8 年前

当这两个元素到达浏览器顶部时,您可以通过jQuery修复它们:

var $window = $(window);

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

那你就要有风格 .someFixedClass position:fixed