add the class "magic-floating-stuff" to any bootstrap column and it will follow your screen when you pass it

floatdiv.js

$(function(){
  var MFS = $('.magic-floating-stuff')
  var ogScrollTop     = $('body').offset().top,
      ogElementOffset = MFS.offset().top,
      ogDistance = (ogElementOffset - ogScrollTop);
  MFSheight = MFS.outerHeight()
  documentHeight = $(document).outerHeight()

  $('body').change(function(){
    MFSheight = MFS.outerHeight()
  });

  $(window).on('scroll', function(){
    var offsetTop     = $('body').offset().top,
    elementOffset = MFS.offset().top,
    distance      = (elementOffset - offsetTop);
    var scrollTop  = $(window).scrollTop()
    
    console.log(documentHeight)

    if(scrollTop > ogDistance ){
      if(scrollTop < documentHeight - MFSheight){
        MFS.css({"position":"relative","top": scrollTop- ogDistance })
      }
    }else{
      MFS.css({"position":"relative","top": 0 })
    }
    
                
  })
});