CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
jessica
jessica

Reputation: 495

Scrollable part of the page with bootstrap

I have a page structured with bootstrap, in this page i have a row with content at the top, then another row divided into col-lg-3, col-lg-6, col-lg-3. What i want is when i reach the second row after scrolling down to it to make the col-lg-3 (both of them) fixed and to make only the col-lg-6 scrollable, i tried setting there position to fixed but it didn't work, how can i do that? Here is my code: 

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

Upvotes: 1

Views: 324

Answers (2)

Edison Biba
Edison Biba

Reputation: 4443

First you need to get with javascript when user has reached second row while scrolling.

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

The next thing is to add our css style for fixed class

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

The width should be inherit so it gets parent width.

Upvotes: 1

Jax-p
Jax-p

Reputation: 8583

I hope I understood your request right, so:

You can fix these 2 elements when they hit the top of your browser via jQuery:

var $window = $(window);

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

Then you have to style .someFixedClass with something like position:fixed

Upvotes: 0

Related Questions