Blog

Sticky footer Jquery jednostavno rešenje!

Donji deo web stranice koji sadrži obično dodatne i manje važne sadržaje i/ili linkove, npr. informacije o privatnosti, autorskim pravima, odricanju od odgovornosti, uslovima korišćenja stranice, izjavi o zaštiti podataka, linkove na glavne celine stranice i sl. Naziva se footer i zaista je lepo da se on uvek nalazi na dnu vašeg ekrana i ako na stranici ne postoji veliki sadržaj.

Na netu postoje mnoga rešenja za pravljenje sticky footera, ali skoro sva rešenja su ograničena visinom i footera i pravilnom markacijom HTML-a što priznaćete nekada može da bude frustrirajuće ako trebate već postojeću aplikaciju da prepravite.

Zato ćemo malo koristiti Javascript da pored CSS klasa ne brinemo više o visini footera, i koliko god stvari da dodate u njega on će uvek perfektno stajati na dnu vašega ekrana nezavisno od rezolucije. Zato krenimo redom sa našim jednostavim rešenjem koje je bazirano na odgovoru http://stackoverflow.com

Prvo je potrebno da vašoj aplikaciji imate instaliran JQUERY, po mogućstvu najnoviju verziju koju je najbolje koristisiti sa CDN -a, šta je to CDN pogledajte ovde.

Dodajte na dno vaše strane pre zatvorenog body taga sledeću liniju

<script src="http://code.jquery.com/jquery-latest.min.js"type="text/javascript"></script>

Mislim da svi do sada znaju kako da pozovu JQUERY biblioteku, tako da se nećemo dalje zadržavati na ovome.

Vaš HTML treba da bude prilagodjen na sledeći način

<body>
    <footer>
        ......
    </footer>
</body>

Dodajte sledeće CSS stilove

html {
    position: relative;
    min - height: 100 % ;
}
footer {
    position: absolute;
    bottom: 0;
    width: 100 % ;
}

I konačno mala pomoć Jquery biblioteke koja će vam pomoći da više nikada ne razmišljate o visini vašeg footera a on će uvek stajati perfektno na dnu vaše aplikacije

(function($) {
    var height = $('footer').height();
    //update the  value when page is loaded
    $(document).ready(function() {
        $('body').css({
            "margin-bottom": height
        });
    });
    //update the  value when the browser is resized (useful for devices which switch from portrait to landscape)
    $(window).resize(function() {
        $('body').css({
            "margin-bottom": height
        });
    });
})(jQuery);

 

 

Nadamo se da vam se naše rešenje dopada i da smo vam pomogli da više nikada ne razmišljate od sticky footer-u.
Detaljan preview možete pogledati i na CodePen-u. Moramo vam napomenuti da je ovo rešenje prialgodjeno HTML5 , CSS3, i responsive dizajnu, Tako da ako korisite neki frontend framework kao što je bootstrap, radiće vam perfektno.

Podelite ovaj članak