CODEWITHSUNDEEP
jquery
Lai Yong Ren
Lai Yong Ren

Reputation: 31

stick footer with jquery

I just begin my JQuery journey and make a simple script for a sticky footer.

jQuery(document).ready(function($) {
    function StickyFooter() {
        var footer  = $('#footer');
        var pos     = footer.position();
        var height  = $(window).height();

        height = height - pos.top;
        height = height - footer.outerHeight();

        if (height > 0) {
            footer.css({'margin-top' : height+'px'});
        }
        else {
            footer.css({'margin-top' : '0px'});
        }
    }

    StickyFooter();

    $(window).resize(StickyFooter)
});

The above works fine but I want to know if this is done correctly. Did I create the custom function correctly?

Upvotes: 0

Views: 74

Answers (1)

Christian Stewart
Christian Stewart

Reputation: 15519

This looks correct; however the functionality you have created is duplicate functionality. The CSS 'fixed' position property does this for you.

An example:

.myFooter{
      position:fixed; 
      bottom:0;
      left:0
 }

 <div class="myFooter">
      This code is locked to the bottom of the window!
 </div>

Upvotes: 1

Related Questions