On scroll footer

Voor mijn werk liep ik tijdens het bouwen van een website voor een klant tegen een probleem met een footer aan. De klant wilde graag dat de footer altijd te zien was ondanks hoe groot of hoe klein het scherm van de gebruiker was. Hij kwam zelf met het voorstel om de gehele website te verkleinen, maar dat is natuurlijk niet mooi in verband met leesbaarheid en ruimtegebruik. Na wat hersenwerk bedacht ik me dat sommige website een dynamische header gebruiken, die kleiner wordt als je naar beneden scrollt op de webpagina, maar wel altijd bovenin zichtbaar blijft.

Het leek me de ideale oplossing omdat principe op de footer in de website van de klant te los te laten. Echter tot mijn verbazing bleek dat er talloze jquery scripts waren voor zulke dynamische headers, maar geen enkele voor een dynamische footer. Na wat zoekwerk bleek dat de oorzaak lag bij jquery, die wel een functie voor scrollTop hadden, maar geen functie voor scrollBotttom die nodig is voor een dynamische footer. Gelukkig was de oplossing zoals altijd op internet te vinden, en was er al iemand geweest die in één regeltje code een vervangen voor scrollBottom had geschreven. Met behulp van dat stukje code kon ik toen mijn eigen script schrijven, dat heel simpel de class van de footer aanpast zodra je de onderkant van de pagina hebt bereikt. Zo kun je de footer twee uiterlijken geven, een grote voor de onderkant van de pagina en een kleine voor als de gebruiker niet aan de onderkant van de pagina is en er weinig ruimte beschikbaar is.

$(document).ready(function() {
    if ($(document).height() > $(window).height()) {
        $("#footer").addClass("footersmall");
    }
    else {
        $("#footer").addClass("footerbig");
    }    
    $(window).scroll(function() {
        var scrollBottom = $(document).height() - $(window).height() - $(window).scrollTop();
        if (scrollBottom > 170) {    
            $("#footer").addClass('footersmall').removeClass('footerbig');
            $(".footerspace").css('display', 'block');        
        } else {  
            $("#footer").addClass('footerbig').removeClass('footersmall');
            $(".footerspace").css('display', 'none');        
        }
    });     
});

Een aantekening bij het script is wel dat de footer twee statische hoogtes nodig heeft wil dit script goed werken. Zodra de footer namelijk kleiner wordt zal er onzichtbare ruimte onder de pagina toegevoegd worden, en die moet hetzelfde zijn als de hoogte van de grote footer. Ook is er een vaste waarde die bepaald vanaf welk aantal pixels scrollen vanaf de onderkant de gebruiker een kleinere footer krijgt voorgeschoteld. Maar als je al die waarden goed hebt ingesteld krijg je een footer die vloeiend groter of kleiner wordt afhankelijk van hoever de gebruiker naar beneden scrollt, en dat loont.

Een werkend voorbeeld is te zien op http:www.vizoverwarming.nl/, de website van de klant waar ik het script voor geschreven heb.

Update: Inmiddels is de werking van het script niet meer te zien op de website van de klant.

Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *