Bootstrap Left-and-Right Column Fixed

In this example below you will see how to do a Bootstrap Left-and-Right Column Fixed with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by raeesh, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright raeesh ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Bootstrap Left-and-Right Column Fixed</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<nav class="navbar navbar-default navbar-middle navbar-fixed-top" role="navigation">
  <div class="container">
    <div class="row">
      <div class="col-sm-12">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>  
          <a class="navbar-brand" href="#">Brand</a>  
        </div>
        <div class="navbar-collapse collapse">
          <ul class="nav navbar-nav navbar-right">
            <li><a href="#">Right #1</a></li>
            <li><a href="#">Right #2</a></li>
            <li><a href="#">Right #3</a></li>
            <li><a href="#">Right #4</a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</nav>

<section class="wrap">
  <div class="container">
    <div class="row">
      <div class="col-xs-3">
        <div class="left-container">
          <div class="left-box">
          <ul>
            <li>Left Box</li>
            <li>Left Box</li>
            <li>Left Box</li>
            <li>Left Box</li>
            <li>Left Box</li>
            <li>Left Box</li>
            <li>Left Box</li>
            <li>Left Box</li>
            <li>Left Box</li>
            <li>Left Box</li>
            <li>Left Box</li>
            <li>Left Box</li>
            <li>Left Box</li>
            <li>Left Box</li>
            <li>Left Box</li>
            <li>Left Box</li>
            <li>Left Box</li>
            <li>Left Box</li>
            <li>Left Box</li>
            <li>Left Box</li>
            <li>Left Box</li>
            <li>Left Box</li>
            <li>Left Box</li>
            <li>Left Box</li>
            <li>Left Box</li>
            <li>Left Box</li>
            <li>Left Box</li>
            <li>Left Box</li>
            <li>Left Box</li>
            <li>Left Box</li>
            <li>Left Box - Last</li>
          </ul>
          </div>
        </div>
      </div>
      <div class="col-xs-6">
        <div class="middle-box">
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
          </p>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
          </p>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
          </p>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
          </p>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
          </p>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
          </p>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
          </p>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
          </p>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
          </p>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
          </p>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
          </p>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
          </p>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
          </p>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
          </p>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
          </p>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
          </p>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
          </p>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
          </p>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
          </p>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
          </p>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
          </p>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
          </p>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
          </p>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
          </p>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            <hr>
            Last Line
          </p>
        </div>
      </div>
      <div class="col-xs-3">
        <div class="right-container">
          <div class="right-box">
            <ul>
              <li>Right Box</li>
              <li>Right Box</li>
              <li>Right Box</li>
              <li>Right Box</li>
              <li>Right Box</li>
              <li>Right Box</li>
              <li>Right Box</li>
              <li>Right Box</li>
              <li>Right Box</li>
              <li>Right Box</li>
              <li>Right Box</li>
              <li>Right Box</li>
              <li>Right Box</li>
              <li>Right Box</li>
              <li>Right Box</li>
              <li>Right Box</li>
              <li>Right Box</li>
              <li>Right Box</li>
              <li>Right Box</li>
              <li>Right Box</li>
              <li>Right Box</li>
              <li>Right Box</li>
              <li>Right Box</li>
              <li>Right Box</li>
              <li>Right Box</li>
              <li>Right Box</li>
              <li>Right Box</li>
              <li>Right Box</li>
              <li>Right Box</li>
              <li>Right Box</li>
              <li>Right Box</li>
              <li>Right Box</li>
              <li>Right Box</li>
              <li>Right Box</li>
              <li>Right Box</li>
              <li>Right Box</li>
              <li>Right Box</li>
              <li>Right Box</li>
              <li>Right Box</li>
              <li>Right Box</li>
              <li>Right Box</li>
              <li>Right Box</li>
              <li>Right Box - Last</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
















<!-- Created By Raeesh Alam -->
<a href="https://codepen.io/raeesh/" target="_blank" style="color:#00c2c0; position: fixed; bottom: 5px; right: 5px; font-size: 11px; text-decoration: none; padding: 5px; background: #000; font-family: Arial; letter-spacing:0.5px;" title="Raeesh Alam">&#10230; Raeesh Alam</a>
  
  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/raeesh/bootstrap-left-and-right-column-fixed-VXXPdN */
body{padding-top: 70px;}

/* ================================== */

.left-container,
.right-container{
  box-sizing: border-box;
  display: block;
  padding-bottom: 40px!important
}
.left-container .fixed, 
.right-container .fixed {
  position: fixed;
}

.left-box ul, .right-box ul{
  list-style-type: none;
  padding: 0px 0px 10px 0px;
  margin: 0px 0px 0px 0px;
  box-sizing: border-box;
}
.left-box ul li, .right-box ul li{
  display: block;
  position: relative;
  background: #999;
  color: #fff;
  box-sizing: border-box;
  padding: 10px 10px;
  margin-bottom: 5px;
  font-size: 12px;
}
.left-box ul li:nth-child(odd), .right-box ul li:nth-child(odd){
  background: #555;
}

/*Downloaded from https://www.codeseek.co/raeesh/bootstrap-left-and-right-column-fixed-VXXPdN */
$(window).on('load', function(){
  
  var asideLeft = {
    top: $('.left-container').offset().top,
    width: $('.left-box').width(),
    height: $('.left-box').height()
  };
  var asideRight = {
    top: $('.right-container').offset().top,
    width: $('.right-box').width(),
    height: $('.right-box').height()
  };

  var browser_height = $(window).height();
  var content_height = $('.wrap').height();
  var position = $(window).scrollTop();

  $('.left-container').height(asideLeft.height );
  $('.right-container').height(asideRight.height );
  
  $(window).scroll(function() {
    var scroll = $(window).scrollTop();
    if (scroll > position) {
      // aside Left
      if(scroll >= asideLeft.top) {
        $('.left-box').addClass('fixed');
        $('.left-box').css({
          'top': 0,
          'width': asideLeft.width+'px'
        });
        if(asideLeft.height >= browser_height) {
          $('.left-box').css('top', asideLeft.top - scroll);

          if(browser_height + scroll >= asideLeft.top + asideLeft.height) {
            $('.left-box').css('top', browser_height - asideLeft.height);
            console.log(browser_height - asideLeft.height);
          }
        }
      }
      // aside Right
      if(scroll >= asideRight.top) {
        $('.right-box').addClass('fixed');
        $('.right-box').css({
          'top': 0,
          'width': asideRight.width+'px'
        });
        if(asideRight.height >= browser_height) {
          $('.right-box').css('top', asideRight.top - scroll);

          if(browser_height + scroll >= asideRight.top + asideRight.height) {
            $('.right-box').css('top', browser_height - asideRight.height);
          }
        }
      }
    }
    else{
      // aside Left
      if($('.left-box').offset().top <= asideLeft.top) {
        $('.left-box').removeClass('fixed');
        $('.left-box').css('top', 0);
      }
      // aside Right
      if($('.right-box').offset().top <= asideRight.top) {
        $('.right-box').removeClass('fixed');
        $('.right-box').css('top', 0);
      }
    }
    position = scroll;
  });
});

$(window).on('resize',function(){location.reload();});

Comments