Item: Bootstrap Left-and-Right Column Fixed
Rating: 3.4
Author: raeesh

0 Downloads
8 Views
Tweet
Download Now View Demo

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

More from raeesh

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

Technologies

Comments

More from raeesh

Load + Hover change background color by data-* attribute

Bootstrap Left-and-Right Column Fixed

Breadcrumb Design

Character Count In Pure JavaScript

You Might Also Like

JavaScript Calculator

Nephila

Website #2

Siema - add arrows navigation to prototype

Game Gard (Gamer Space)

radius scatter

safety.com

toba