Menu icon Foundation
Sticky header and footer not working properly

I have built the bulk of my website (matt-hiemstra.com) using foundation, and I came across the post of how to add a sticky header and a sticky footer. I implemented both the way it showed on the posts, but when I scroll down, the header switches to the footer and the footer is in place of where the sticky header should be.

Is there maybe a better way to get both the header AND footer to stick to the top and bottom of the web page as the user scrolls through the site?

sticky headersticky footer

I have built the bulk of my website (matt-hiemstra.com) using foundation, and I came across the post of how to add a sticky header and a sticky footer. I implemented both the way it showed on the posts, but when I scroll down, the header switches to the footer and the footer is in place of where the sticky header should be.

Is there maybe a better way to get both the header AND footer to stick to the top and bottom of the web page as the user scrolls through the site?

Rafi Benkual over 3 years ago

It looks like on mobile the footer is getting style added that has margin-top: 150px

It doesn't look like the body height is being calculated correctly. Perhaps it's due to the placement of the footer wrapper. What is the plugin you are using? Maybe we can see where the issue is we know what you're working with.

Matt Hiemstra over 3 years ago

The footer.js file looks like this:

  $(window).bind("load", function () {
    var footer = $("#footer");
    var pos = footer.position();
    var height = $(window).height();
    height = height - pos.top;
    height = height - footer.height();
    if (height > 0) {
        footer.css({
            'margin-top': height + 'px';
        });
    }
});