show sticky div

show sticky div

by dke358

HTML

<div id="container">
  <div id="content" class="content">
      <div id="jumbo1">
        jumbo1 crap down here<br/>
        jumbo1 crap down here<br/>
        jumbo1 crap down here<br/>
        jumbo1 crap down here<br/>
        jumbo1 crap down here<br/>
        jumbo1 crap down here<br/>
        jumbo1 crap down here<br/>
        jumbo1 crap down here<br/> 
        jumbo1 crap down here<br/>
        jumbo1 crap down here<br/>        
      </div>
      <hr/>
      <div id="jumbo2">
        jumbo2 crap down here<br/>
        jumbo2 crap down here<br/>
        jumbo2 crap down here<br/>
        jumbo2 crap down here<br/>
        jumbo2 crap down here<br/>
        jumbo2 crap down here<br/>
        jumbo2 crap down here<br/>
        jumbo2 crap down here<br/>
        jumbo2 crap down here<br/>
        jumbo2 crap down here<br/>
        jumbo2 crap down here<br/>
        <hr/>
    </div>       
  </div>
  <div id="sidebar">
    <div id="leftNav">
      leftNav crap here<br/>
      leftNav crap here<br/>
      leftNav crap here<br/>
      leftNav crap here<br/>
      leftNav crap here             
    </div>
    <div id="sticky">
      sticky crap here<br/>
      sticky crap here<br/>
      sticky crap here<br/>
      sticky crap here
    </div>   
  </div>    
</div>
<div id="footer">
  footer crap down here<br/>
  footer crap down here<br/>
  footer crap down here<br/>
  footer crap down here<br/>
  footer crap down here<br/>
  footer crap down here<br/> 
  footer crap down here<br/>
  footer crap down here<br/>
  footer crap down here<br/>
  footer crap down here<br/>
  footer crap down here<br/>
  footer crap down here<br/>      
</div>

CSS

#container {
    position: relative;
    width: 100%;
    height: 100%;
}
#sidebar{
  position: absolute;
  top: 0px;
  margin-top: 15px;
  bottom: -15px;
  margin-bottom: 15px;
  left: 0px;
  width: 205px;
  height:100%;
  
}
#sticky {
  background-color: red;  
  position: fixed; 
  filter: alpha(opacity=50);
  /* IE */
  -moz-opacity: 0.50;
  /* Mozilla */
  opacity: 0.50;
}
#leftNav{
  width: 100%;
}
#content{
  margin-left:250px;
}
#footer{
    position: relative; 
}

/* account for "sticky" being removed from doc flow... */
.dock #content, .stop #content { padding-top:10px; }
/* when "leftNav" is out of view... */
.dock #sticky { z-index:40; position:fixed; }
/* when "content" is out of view... */
.stop #sticky { z-index:40; position:absolute; }

JavaScript

jQuery(document).ready(function() {
	jQuery("#sticky").hide();
});

var position = $(window).scrollTop();

jQuery(window).scroll(function() {
  var leftNav = $('#leftNav');
  var leftNavHeight = leftNav.height();
  /*leftNav.css('height',leftNavHeight);
    console.log("leftNavHeight: " + leftNavHeight);*/

  var sticky = $('#sticky');
  var stickyHeight = sticky.height();
  var stickyOffetTop = sticky.offset().top;	
  console.log("stickyHeight: " + stickyHeight);

  var sidebar = $('#sidebar');
  var sidebarHeight = sidebar.height();
  /*console.log("sidebarHeight: " + sidebarHeight); //324
    sidebar.css('height',sidebarHeight);*/

  var content = $('#content');
  var contentHeight = content.height();
  /*console.log("contentHeight: " + contentHeight);
    content.css('height',contentHeight);*/

  var footer = $('#footer');
  var footerHeight = footer.height();
  var footerOffsetTop = footer.offset().top;
  console.log("footerOffsetTop: " + footerOffsetTop);
  
  var osFoot = footerOffsetTop - stickyHeight;
  console.log("footerHeight: " + footerHeight);
  console.log("osFoot: " + osFoot);

  /*content.css('height',contentHeight);*/

  var container = $('#container');
  var containerHeight = container.height();
  console.log("containerHeight: " + containerHeight);

  var scrollStop = containerHeight - footerHeight;
  console.log("scrollStop: " + scrollStop);

  var edge = jQuery(window).scrollTop();
  console.log("edge: " + edge + ", osFoot: " + osFoot);
	if(edge > leftNavHeight+10 && edge < footerOffsetTop) {   
    console.log("fading in Sticky");
    sticky.css("top", 0);
    sticky.css("position", 'fixed');
    jQuery("#sticky").fadeIn("1000");
  }

  if(edge <  leftNavHeight) {
    console.log("fading out Sticky");
    jQuery("#sticky").fadeOut();
  }
  if (edge > osFoot) {
    console.log("setting sticky top to footer offset Top");
    console.log("StickyTop: " + sticky.offset().top);    
    sticky.css("position", 'absolute');
    sticky.css("top",...