Sticky Footer JavaScript Solution

458
March 05, 2017, at 1:33 PM

So I've implemented a sticky footer in which the .main element contains a .head elements with a relative position so that it stays at the top. It also contains a .foot element that will assume absolute positioning if there is enough room to do so. Otherwise, it will assume relative positioning so that the .head and .foot never overlap. The code is as follows:

var stickyFooter = function()
{
    var mainSize = $(".main").first().height();
    var headSize = $(".head").first().height();
    var footSize = $(".foot").first().height();
    if (headSize + footSize > mainSize)
    {
        $(".foot").first().css("position", "relative");
    }
    else
    {
        $(".foot").first().css("position", "absolute");
        $(".foot").first().css("display", "block");
        $(".foot").first().css("width", "100%");
        $(".foot").first().css("bottom", "0");
    }
};

$(function()
{
    stickyFooter();
    $(window).resize(function()
    {
        console.log("Resize");
        stickyFooter();
    });
});

It works fine on running on my computer but once I upload it to my host service (Bluehost) it becomes very selective as to when it wants to work. On Chrome, the sticky footer does not work at all. On Firefox, it seems to work consistently. I am just completely confused as to how I can fix this problem. Here is my website: http://glocalimpacts.org/

As you can see, the social icons which form the entirety of the .foot element should be absolutely positioned at the bottom of the page right now because the window is large enough to do so without overlapping on the .head. Despite working on Firefox, I've had no luck on other browsers. Can someone weigh in on this issue?

Answer 1

instead of using javascript, try using this css. Just put your footer in a

html {
  position: relative;
  min-height: 100%;
}
body {
  /* Margin bottom by footer height */
  margin-bottom: 60px;
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 60px;
  background-color: #f5f5f5;
}

I found this in an example provided from bootstraps example pages, I didnt create any of this code myself.

Rent Charter Buses Company
READ ALSO
Meteor textarea saving content to collection

Meteor textarea saving content to collection

I'm very new to programming and working with meteor so bare with me! So I'm making this webpage where you can create a canvas which includes a title and different sections on a chartOn the homepage you click "create new canvas" which calls a modal where you can enter the title of the canvas...

286
Jquery Redirect to image src or data-attr

Jquery Redirect to image src or data-attr

On a image inside link instead of use link href i would like to use img src to redirect to image path

472
Javascript to AngularJS directive

Javascript to AngularJS directive

Has anyone converted plain javascript code of justgage chart into angularjs directiveI found couple over internet but did'nt work for me

376
What is wrong with this javascript not getting dynamic fetch data from database?

What is wrong with this javascript not getting dynamic fetch data from database?

I have the same script, same style on many other different pages and it works perfectly at displaying dynamic data in a modalI stripped the script from top to bottom

283