JS Sticky Bar

I wonder how many users do appreciate a sticky bar. It can be seen in a lot of modern web applications, just look at the popular w3schools page. It's that full-width horizontal bar on top that mostly contains a menu, and scrolls away until it reaches the viewport top, then "sticks" there.

Well, I admit that I myself find it useful:-) Although I do not understand why it has to be done so magically. Why not have a header and a scrollable panel below it? Is this about accessibility, trying to not have scrollbars within the web-page, avoiding the deprecated frames concept?

However, this Blog is about how sticky bars could be implemented. Here is an example.

Scroll down!
The title below is "sticky" and won't scroll out of view.

Metamorphoses (Ovid)

Aurea prima sata est aetas, quae vindice nullo,

sponte sua, sine lege fidem rectumque colebat.

Poena metusque aberant nec verba minantia fixo

aere legebantur, nec supplex turba timebat

iudicis ora sui, sed erant sine vindice tuti.

Nondum caesa suis, peregrinum ut viseret orbem,

montibus in liquidas pinus descenderat undas,

nullaque mortales praeter sua litora norant.

Nondum praecipites cingebant oppida fossae,

non tuba directi, non aeris cornua flexi,

non galeae, non ensis erant: sine militis usu

mollia securae peragebant otia gentes.

....

[The End]

This article requires know-how about the CSS position property. You could read my past Blog about this, and study it here.

I do not use jQuery here, although I appreciate their work a lot. As a result, the JS code below might not work in old or exotic browsers. Already know youmightnotneedjquery?

Two Ways to Sticky

I spent a lot of time studying the problems that result from the fixed (absolute) method, experimenting with any kind of element, having different margin / border / padding combinations. It seems an endless story to me. Anyway, in the following I will present simple implementations of both methods. You can go to my homepage to see the current state and source of my efforts around sticky bars.

HTML Example Page

Here is the HTML code I would like to use for a simple implementation of both principles. The sticky element is marked by id=stickybar.

Paste the code into some file, add one of the following JavaScripts, and try it out in your favorite browser, using the file:/// protocol prefix in address line.

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="initial-scale=1"/>
  <title>Horizontal Sticky Bar</title>
</head>

<body>

  <div style="text-align: center;">
  
    <p style="padding: 2em;">
      Scroll down!<br>
      The title below is "sticky" and won't scroll out of view.<br>
    </p>
      
    <div id="stickybar" style="padding: 1em 0 1em 0; background-color: green; color: white;">
      Metamorphoses (Ovid)
    </div>
      
    <div style="position: relative; height: 70em;">
      <p>Aurea prima sata est aetas, quae vindice nullo,</p>
      <p>sponte sua, sine lege fidem rectumque colebat.</p>
      <p>Poena metusque aberant nec verba minantia fixo</p>
      <p>aere legebantur, nec supplex turba timebat</p>
      <p>iudicis ora sui, sed erant sine vindice tuti.</p>
      <p>Nondum caesa suis, peregrinum ut viseret orbem,</p>
      <p>montibus in liquidas pinus descenderat undas,</p>
      <p>nullaque mortales praeter sua litora norant.</p>
      <p>Nondum praecipites cingebant oppida fossae,</p>
      <p>non tuba directi, non aeris cornua flexi,</p>
      <p>non galeae, non ensis erant: sine militis usu</p>
      <p>mollia securae peragebant otia gentes.</p>
      <p>....</p>
      
      <div style="position: absolute; bottom: 1em; width: 100%;">
        [The End]
      </div>
      
    </div>
    
  </div>


  <script type="text/javascript">
    "use strict";

    // JS code goes here

  </script>

</body>
</html>

The "relative" Way

This is the technically easier approach, though usability lacks. What happens is that you can scroll away the sticky bar by fast scrollbar movements. There is no workaround for this, because this solution depends completely on scroll events sent by the browser. On fast moves, the final events are not sent by the browser any more, so the stick bar stays behind.

    var browserViewportY = function() {
      return (window.pageYOffset !== undefined) ? window.pageYOffset : document.documentElement.scrollTop;
    };
    
    var browserViewportHeight = function() {
      return (window.innerHeight !== undefined) ? window.innerHeight : document.documentElement.clientHeight;
    };
    
    var browserPageHeight = function() {
      return document.documentElement.getBoundingClientRect().height;
    };

The viewport is the currently visible area of the page. The viewportY variable gives the scroll-top, which is the distance of the page-top to the viewport-top. The getBoundingClientRect() call returns viewport-relative coordinates.

Next shows the scroll-event processing function that uses all others to keep the bar sticky. For this it calls setSticky() (init), adjustSticky() (work) and unsetSticky() (exit) under certain conditions.

    var onScroll = function() {
      var viewportY = browserViewportY();
      var boundingClientRect = stickyElement.getBoundingClientRect();
      
      if (stickyElement.initialTop === undefined)  { /* not being sticky */
        if (boundingClientRect.top < 0) { /* going out of view */
          setSticky(stickyElement, boundingClientRect.top);
          /* set the top-offset to observe now */
          stickyElement.initialTop = viewportY + boundingClientRect.top;
        }
      }
      else if (stickyElement.initialTop < viewportY) { /* further going out of view, adjust y */
        if (browserPageHeight() > viewportY + browserViewportHeight()) /* not page end reached */
          adjustSticky(stickyElement, viewportY);
      }
      else if (stickyElement.initialTop > viewportY) { /* coming into view */
        unsetSticky(stickyElement);
        stickyElement.initialTop = undefined;
      }
    };

Here is a naive implementation of the things to do when the bar gets sticky, must be adjusted, or goes back to initial state.

    var setSticky = function(stickyElement, boundingClientRectTop) {
      stickyElement.style.position = "relative";
      stickyElement.style.top = (- boundingClientRectTop)+"px";
      stickyElement.style["z-index"] = 1; /* else transparent */
      if ( ! stickyElement.style["background-color"])
        stickyElement.style["background-color"] = "white"; /* else transparent */
    };
    
    var adjustSticky = function(stickyElement, viewportY) {
      stickyElement.style.top = (viewportY - stickyElement.initialTop)+"px";
    };
    
    var unsetSticky = function(stickyElement) {
      stickyElement.style.position = "";
    };

Because in JavaScript properties are created when they are used, I can store the initial top-coordinate into the element's property initialTop. After setting it, it is the criterion for detecting the reset-moment.

Care must be taken to not scroll down endlessly. When moving the bar down, it will create more scroll space dynamically. The condition if (browserPageHeight() > viewportY + browserViewportHeight()) prevents from going beyond the page end.

Here is the remaining code, defining the missing stickyElement and installing the event-listener, in a self-executing JS capsule.

  (function() {

    var stickyElement = document.getElementById("stickybar");
    
    ....
  
    window.addEventListener("scroll", onScroll);
    
  })();

Paste all three JS snippets above into the capsule where the "...." is, and the capsule into the HTML page above, and try out if it works.

The "fixed" Way

The problem with the "fixed" solution is that the sticky HTML element gets removed from the layout flow when set to fixed or absolute. The place where it has been must be filled with a place-holder element that has the same size. Further the sticky bar behaves differently when being no more in layout flow of the page, for example the default 100% width of a div does not apply any more, it collapses to its "natural" size needed by contained text. Thus we need to size it, but this again causes a wrong width when the browser window is resized after.

Here is the outline of things to do for this solution. (Mind that this will need a lot of fixes when the bar or its environment is managed by complex CSS. Mind further that I won't solve the "absolute" case here. You may find info about bridging fixed to absolute here.)

The y-offset of the viewport within the scrollpane is all information we need for this solution.

    var onScroll = function() {
      var viewportY = browserViewportY();
      
      if (stickyElement.initialTop === undefined)  { /* not being sticky */
        var boundingClientRect = stickyElement.getBoundingClientRect();
        
        if (boundingClientRect.top < 0) { /* going out of view */
          setSticky(stickyElement, boundingClientRect.left);
          /* set the top-offset to observe now */
          stickyElement.initialTop = viewportY + boundingClientRect.top;
        }
      }
      else if (stickyElement.initialTop > viewportY) { /* coming into view */
        unsetSticky(stickyElement);
        stickyElement.initialTop = undefined;
      }
    };

This event-processing is simpler in that it does not update the relative position always.

But of course the setSticky() function is much more complicated. And a lot of fixes will have to be done here when being in a complex CSS environment.

    var setSticky = function(stickyElement, left) {
       /* create a placeholder with same dimensions */
       var placeHolder = document.createElement("div");
       placeHolder.style.width = stickyElement.clientWidth+"px";
       placeHolder.style.height = stickyElement.clientHeight+"px";
       
       /* insert placeholder before stickyElement */
       stickyElement.parentElement.insertBefore(placeHolder, stickyElement);
       stickyElement.myPlaceHolder = placeHolder; /* remember for removal */

       stickyElement.style["z-index"] = 1; /* else transparent */
       if ( ! stickyElement.style["background-color"])
         stickyElement.style["background-color"] = "white"; /* else transparent */
       
       /* fix stickyElement to viewport */
       stickyElement.style.top = 0;
       stickyElement.style.left = left+"px";
       stickyElement.style.width = placeHolder.style.width;
       stickyElement.style.position = "fixed";
    };
    
    var unsetSticky = function(stickyElement) {
      stickyElement.parentElement.removeChild(stickyElement.myPlaceHolder);
      stickyElement.myPlaceHolder = undefined;
      stickyElement.style.position = "";
      stickyElement.style.width = "";
    };

The place-holder element simply gets stored into the element-property myPlaceHolder that will be created by JS when accessed that way.