<div class="intro">
  Inner div in the right column has affix effect.
</div>
<div class="parent">
  <div class="child left">Left</div>
  <div class="child main">Main</div>
  <div class="child right">
    <div class="inner">
      <div class="item">item</div>
      <div class="item">item</div>
      <div class="item">item</div>
      <div class="item">item</div>
      <div class="item">item</div>
      <div class="item">item</div>
      <div class="item">item</div>
      <div class="item">item</div>
    </div>
  </div>
</div>

<div class="footer">Footer</div>
html
  margin: 0
  padding: 0
  font-family: sans-serif

.intro
  padding: 10px
  
.child
  text-align: center
  padding: 20px 10px
  box-sizing: border-box

.parent
  display: flex
  
.child.left
  width: 150px
  flex: 0 0 auto
  background-color: tomato
  
.child.main
  flex: 1 0 auto
  background-color: #eee
  min-height: 2000px
  
.child.right
  width: 80px
  flex: 0 0 auto
  background-color: #ddd
  position: relative

.item
  background-color: tomato
  padding: 5px
  margin: 10px 0
  height: 100px
  width: 50px

.footer
  color: #fff
  padding: 50px
  background-color: #000

.affix
  position: fixed
  bottom: 0

.affix-bottom
  position: absolute
  bottom: 0
$inner = $('.child.right .inner')
bottom = $inner.offset().top + $inner.outerHeight()

$(window).on 'scroll', ->
  
  if $(window).scrollTop() + $(window).height() > $('.footer').offset().top
    $inner.removeClass('affix')
    $inner.addClass('affix-bottom')
  else if $(window).scrollTop() + $(window).height() > bottom
    $inner.removeClass('affix-bottom')
    $inner.addClass('affix')
  else
    $inner.removeClass('affix')
    $inner.removeClass('affix-bottom')
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js