Right column of fixed site

Question

I have a layout with 2 columns.

1. Left Column: Contents
2. Right Column: Various Information

when the user is browsing the site, scrolling down the right content ends up being visible only the left How to leave the right column fixed on the screen when your content is finished?

Example scroll and pay attention to the right part of the site.

code used

<div class="content content-center marginTop">
        <div class="container">
            <div class="row">
                <div class="bounceInLeft animated col-md-8 col-sm-8 col-xs-12">
                    <?php 
                    include 'pages/primeira.php';
                    include 'pages/segunda.php';
                    include 'pages/terceira.php';
                    include 'pages/quarta.php';
                    include 'pages/quinta.php';
                    include 'pages/sexta.php';
                    include 'pages/setima.php';
                    include 'pages/oitava.php';
                    include 'pages/nona.php';
                    include 'pages/decima.php';
                    ?>
                </div>
                <div class="bounceInLeft animated col-md-4 col-sm-4 col-xs-12">
                    <?php  
                    include 'pages/direita.php';
                    ?>

                </div>
            </div>
        </div>
    </div>

Answer 1

I didn’t find many ready examples of how to do this, so I decided to do it myself. See if this is what you want:

I believed a div with the class="sideBar" which may have several articles, the "related", or anything else. I represented this by several div.artigos.

Stayed like this:

<div class="sideBar" >
  <div class="artigos"></div>
  <div class="artigos"></div>
  <div class="artigos"></div>
  <div class="artigos"></div>
  <div class="artigos"></div>
</div>
<div class="conteudo" >
</div>

Their respective styles:

.sideBar{
  width: 180px;
  height: auto;
  float: right;
}
.conteudo{
  width: auto;
  height: 2000px;
  background: #333;
  margin-right: 200px; 
}
.sideBar .artigos{
  width: 100%;
  height: 200px;
  background: #f30;
  margin-bottom: 5px;
}

I already made the code in Jquery:

$(document).scroll(function(){
  var left = $('.sideBar').offset().left;
  if($(this).scrollTop() >= $('.sideBar').height() - $('.artigos:last').height()){
    $('.sideBar').css({
      position: 'fixed',
      top: -($('.sideBar').height() - $('.artigos:last').height()),
      left: left
    })
  }else{
    $('.sideBar').css({
      position: 'relative',
      top: 0,
      left: '0'
    })
  }
})

I used the event .scroll() jquery. When scrolling the page the first thing that will be done will be the capture of the left of .sideBar. After that he will verify whether the .scrollTop document is larger than the size of the .sideBar subtracted with the size of the last .artigos, and if it is the div.sideBar will receive a position: fixed, how this behaves taking into account the whole page, will have a left corresponding to the previous catch. top will be equal to the size of the .sideBar subtracted with the size of the last .artigos, but negative (same calculation as the verification of the scroll).

But should the scroll shall be less than the result of the calculation, div.sideBar this will receive a position: relative, and a reset on left and top.

Complete Code

Note that when the div.conteudo ends the div.sideBar stays fixed, but if it goes back up, it goes back to running along with the rest.

$(document).scroll(function(){
  var left = $('.sideBar').offset().left;
  if($(this).scrollTop() >= $('.sideBar').height() - $('.artigos:last').height()){
    $('.sideBar').css({
      position: 'fixed',
      top: -($('.sideBar').height() - $('.artigos:last').height()),
      left: left
    })
  }else{
    $('.sideBar').css({
      position: 'relative',
      top: 0,
      left: '0'
    })
  }
})

.sideBar{
  width: 180px;
  height: auto;
  float: right;
}
.conteudo{
  height: 2000px;
  background: #333;
  margin-right: 200px; 
}
.sideBar .artigos{
  width: 100%;
  height: 200px;
  background: #f30;
  margin:0 0 5px 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sideBar" >
  <div class="artigos"></div>
  <div class="artigos"></div>
  <div class="artigos"></div>
  <div class="artigos"></div>
  <div class="artigos"></div>
</div>
<div class="conteudo" >
</div>

Jsfiddle

If you have difficulties to implement in your code, let me know.