18 May 2016

Prevent fixed left-hand navigation from colliding with the footer using jQuery and CSS

Fixed lefthand nav and footer overlap

So you’ve just set up some fixed left-hand navigation using position: fixed in your CSS. This work great except when you scroll to the bottom of the screen and it over/underlaps with the footer.

What to do? This:

jQuery:

Execute this on load, scroll and resize:

What’s happening here?

First we get the vertical position of the left-hand nav from the top of the window:

We then do the same for the footer:

Now we subtract the position of the left-hand nav from the position of the footer:

We apply the calculation to the height of the left-hand nav:

We put all of this into a function and execute it each time the window is loaded, resized or scrolled:

In your CSS you’ll want to ensure that your left-hand nav has overflow-y: scroll applied to it so that the user will be able to scroll within it should the height of the nav exceed that of the window. 

To force the scrollbar to appear on all browsers, take a look at Make scrollbar visible on Chrome and Safari on Mac.

View the working demo.