Sticky Bottom Bar

by aikenst

HTML

<header id="static-wrapper">
  <div id="fixed-part">
    <div class="content">Menu 'n such</div>
  </div>
</header>
<div id="body-content">
  
</div>

CSS

html {box-sizing: border-box;}

*, *:before, *:after {box-sizing: inherit;}

#static-wrapper {
  position: static;
  height: 4em;
}

#fixed-part {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 4em;
  padding: 1.5em;
  line-height: 1em;
  background-color: #BADA55;
}

#fixed-part.bottom {
  top: auto;
  bottom: 0;
}

JavaScript

var bodyContent = document.getElementById("body-content"),
    fixedPart = document.getElementById("fixed-part");

(function popBC() {
  for(var i=1;i<200;i++) {
  	var p = document.createElement("p");
    p.innerText = "Line " + i;
    bodyContent.appendChild(p);
  }
})();

var currentY;
window.addEventListener("scroll", function(){
	currentY = window.pageYOffset;
  if(currentY > 500) {
  	fixedPart.className = "bottom";
  } else {
    fixedPart.className = "";
  }
});