Sticky Footer Example

An example of how to create a sticky footer.

by Robert Vunabandi

HTML

<html>
<body>
<script>
window.addEventListener("load", activateStickyFooter);

function activateStickyFooter() {
  adjustFooterCssTopToSticky(); 
  window.addEventListener("resize", adjustFooterCssTopToSticky);
}

function adjustFooterCssTopToSticky() {
  const footer = document.querySelector("#footer");
  const bounding_box = footer.getBoundingClientRect();
  const footer_height = bounding_box.height;
  const window_height = window.innerHeight;
  const above_footer_height = bounding_box.top - getCssTopAttribute(footer);
  if (above_footer_height + footer_height <= window_height) {
    const new_footer_top = window_height - (above_footer_height + footer_height);
    footer.style.top = new_footer_top + "px";
  } else if (above_footer_height + footer_height > window_height) {
    footer.style.top = null;
  }
}

function getCssTopAttribute(htmlElement) {
  const top_string = htmlElement.style.top;
  if (top_string === null || top_string.length === 0) {
    return 0;
  }
  const extracted_top_pixels = top_string.substring(0, top_string.length - 2);
  return parseFloat(extracted_top_pixels);
}

LOREM_IPSUM_SENTENCES = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla viverra libero nibh, nec egestas mauris gravida non. Cras mattis, lacus ac ornare congue, augue felis volutpat nisi, ac lacinia eros libero quis urna. Praesent efficitur ex justo, sit amet condimentum leo elementum ac. Praesent lobortis id lacus non euismod. Pellentesque non ullamcorper nisi. Pellentesque iaculis urna ligula, vitae venenatis enim consequat id. Aliquam consequat egestas tellus. Aliquam erat volutpat. Interdum et malesuada fames ac ante ipsum primis in faucibus. In eu tortor eget sapien eleifend dignissim. Ut pretium nibh enim, eu cursus eros imperdiet id. Vestibulum aliquet finibus nisl nec blandit. Sed tempor id elit eu aliquet. Sed volutpat sodales maximus. Suspendisse dictum mauris rutrum nisl pretium gravida.".split(".");
LOREM_IPSUM_INDEX = 1;

function addContent() {
 ...

CSS

body, html {
  padding: 0;
  margin: 0;
}

#footer {
  padding: 1rem;
  position: relative;
  background-color: red;
  color: white;
}

JavaScript

/**
 * Javascript is written inline. See HTML.
 */