How to Make a Sticky Footer Using JavaScript
I have been doing web development for quite a long time now (over 2 years), and in web dev, there are things that you just have to hack away because there is no standard way to do them. One of those things is making a sticky footer.
What’s a Sticky Footer?
Here’s a diagram from css-tricks that explains this a lot better than I can ever try:
The black box is your browser’s window, and you want the footer to “stick” to the bottom of the page whenever the content (in green) doesn’t fill up the space. However, if the content fills up more than the browsers’ window height minus the height of the footer, then you want the footer to just be right below the content.
CSS Tricks gave some tips above. I am not entirely sure why, but these methods didn’t work for me (none of them). One major reason is that the website I was working on, mit-smart-confessions, already has its own structure. I didn’t want to go ahead and change the structure just to try something that may or may not work. However, I know CSS Tricks to have a very good reputation, so if you’re just starting out your website, I’d recommend checking out their method.
Making Sticky Footer Using Javascript
Now, here’s what I very recently discovered. I think this solution is very elegant. It’s also possible that this solution has already been implemented before, but I have not seen it in the my small career as a web developer.
Imagine you have some website that looks like this:
<html>
<head>
<!-- a bunch of stuffs here -->
</head>
<body>
<!-- a bunch of stuffs here too -->
<footer id="footer">
<!-- YOUR FOOTER CONTENT GOES HERE -->
</footer>
</body>
</html>You have your footer as the last node of the <body> tag, and some other html code. Essentially, you have your HTML written in such a way that the footer is visually at the bottom of the page and has the css attribute position: relative.
Now, to make the footer stick to the bottom of the page, the strategy is to change the css attribute top of the footer such that whenever the browser window resizes, we change the top attribute be whatever is needed to keep the footer either at the bottom of the page or right below the main content. To do that, we run the following code:
The key method is HTMLNode.getBoundingClientRect(). This method returns the height going from the top of the browser up to the element. This height includes the element’s top. Given this information, we can remove the element’s top from it (since we must not use it for this to work) and do our check to figure out the new footer’s top.
According to MDN, this method has basic support in all major web browser and also on mobile (except Safari’s mobile in case the user has zoomed in).
Why This is Elegant
Using this method, one doesn’t need to know what’s on the page. All that one uses to figure out the numbers are just the footer HTML node and that’s it. How I used to do this in the past is that I’d calculate above_footer_height by adding up the height of all the elements above it. But that’s not scalable because you’d have to add in any newly added element into this calculation.
With this, no need to worry about what is above the footer. Which is great! And all of it can be written in only 29 lines of code without comments and mainly 2 functions, adjustFooterCssTopToSticky and getCssTopAttribute.
Drawbacks: This is Still Hacky
The only drawback about this was that we had to assume that the units of the top attribute were pixels. It is possible that one writes them in a completely different unit (such as rem or em). In that case, one would have to modify the getCssTopAttribute function to return the height in pixels, which shouldn’t be too difficult.
At the same time, this is still a bit hacky. It’d be nice if we could have a magic css attribute that would just make it sticky. Something like, position: stick-to-bottom.
In addition, when the page loads, you can see how the footer very quickly moves to the bottom of the page. This looks glitchy and is not very pretty to see.
Another point is that if your website adds content dynamically, you must also call the function adjustFooterCssTopToSticky every time content is added. It’d be nice if it could just work on its own.
The final thing is that you have to remember to set the position of the footer as relative. That is something that is easy to forget.
—
Update on Dec 6th, 2018:
I found another bug that happens on smartphones. In some smartphones, you can scroll beyond the end of the screen, and if you do, the scrolling will bounce back to the normal stage.
If you have a smartphone that does this (happened to me on my iPhone 8), this method will actually add that extra space into the page. The page goes back to normal when you scroll back up, but it feels like you can never stop scrolling. So, that is quite annoying in terms of user experience.
I haven’t had time to figure out a clean way to fix this, but just know that it’s out there.
Final Code
Here’s the final code without comments
Also check out this JS Fiddle to see it in action:
Final Thoughts
I have to be honest and say that I have not tested this method working with all other browsers. It worked on my Chrome, Safari and Firefox 2 browsers, so I just assumed it works on most of them. If you try it, let me know the results! Also curious, have you had to deal with this problem? How did you solve it?
