JSFiddle - React, Tailwind, and code Playground

HTML

<div id="header"></div>
	<div id="content">
		<div id="left"></div>
		<div id="right">
			<div id="sidebar" class="important"></div>

		</div>
	</div>
	<br class="clear">
	<div id="footer"></div>

CSS

body { margin:0; padding:0; }
	br.clear { clear:both; }

	#header { width:100%; height:150px; border:1px solid #000; }

	#content { width:980px; margin:0 auto; }
		#left, #right { float:left; border:1px solid #000; min-height:2200px; }
		#left { width:400px; margin-right:40px; }
		#right { width:150px; position:relative}
			#sidebar { width:140px; position:fixed; background:#000; height:450px; }

	#footer { width:100%; height:150px; border:1px solid #000; clear:both; margin:418px 0 0; }

#sidebar.fixed{position:absolute;top:auto;bottom:0px;}

JavaScript

$(function(){
    $(window).scroll(function(e){
      if($(this).scrollTop()>1750)
          $('#sidebar').addClass('fixed')
        else
            $('#sidebar').removeClass('fixed')
    })

})