Ползучий сайдбар

by Pavel Kharitonov

HTML

<script src="https://rawgithub.com/twbs/bootstrap/43cf003f9a0648787ab0285ebec866b1a7263c8a/dist/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>

</head>
<body>

  <div class="container">
      <div class="row">
          <div class="col-md-12 b-header">
              HEADER
          </div>
      </div>
    <div class="sidebar" data-spy="affix" data-offset-top="50" data-offset-bottom="700">
      Sidebar
    </div>
  </div>

CSS

body {
    margin: 0;
  }
  .container {
    margin: 0 auto;
    width: 500px;
    min-height: 2000px;
    position: relative;
    background-image: url(http://subtlepatterns.com/patterns/square_bg.png);
  }
  .container::before, .container::after {
    position: absolute;
    width: 100%;
    text-align: center;
    background-color: rgba(230,200,50,0.2);
  }
  .container::before {
    content: 'Header';
    top: 0;
    line-height: 50px;
  }
  .container::after {
    content: 'Tall Footer';
    bottom: 0;
    line-height: 700px;
  }
  .sidebar {
    position: absolute;
    width: 100px;
    line-height: 200px;
    text-align: center;
    background-color: rgb(200,200,200);
    background-image: url(http://subtlepatterns.com/patterns/square_bg.png);
  }
  .sidebar.affix {
    position: fixed;
    top: 0;
  }
  .sidebar.affix-top {
    top: 50px;
  }
  .sidebar.affix-bottom {
    bottom: 700px;
  }