Buch & Berger

  • Angebot
  • Agentur
  • Blog
  • Kontakt
  • Search

Genesis Sticky Footer

Genesis Sticky Footer: eine umfassende Sticky-Footer-Lösung für das Genesis Framework für WordPress.

Auf Pages mit wenig Inhalt positioniert das folgende Modul den Footer am unteren Rand des Browser-Viewports. Auf längeren, scrollbaren Pages verhält sich der Footer jedoch ganz normal und schließt erst am Dokumentende ab.

Ob für eingeloggte User der Admin Bar im Frontend aktiviert ist oder nicht, wird erkannt und in die Berechnung der Footer-Position miteinbezogen.

Genesis Sticky Footer: der Code

/** Intro:
The module sticks the Genesis site footer to the bottom of 
the page and viewport, even if the page content is too short 
to push it there. But it behaves normally on pages, that have
enough content to push it out of sight.

Note: To add space above the footer vis CSS use the
'.sticky-footer-spacer' class with the height property.

Based on: https://9seeds.com/2013/11/29/sticky-footer-genesis
*/


/*
PHP: Add Sticky Footer Page Wrapper
---------------------------------------------------------------------------------------------------- */

/**
 * Add Page Wrapper
 */
add_action( 'genesis_before_header', 'bubdev_stickyfooter_pagewrap_open');
function bubdev_stickyfooter_pagewrap_open() {

  echo '<div class="sticky-footer-page-wrapper">';
}

add_action( 'genesis_before_footer', 'bubdev_stickyfooter_pagewrap_close');
function bubdev_stickyfooter_pagewrap_close() {

  echo '<div class="sticky-footer-spacer"></div></div>';
}


/*
CSS / JS
---------------------------------------------------------------------------------------------------- */

add_action( 'wp_head', 'bubdev_stickyfooter_script_and_styles' );
/**
 * Add sticky footer CSS and JS to page head.
 */
function bubdev_stickyfooter_script_and_styles() {


  /* Sticky Footer CSS
  --------------------------------------------- */ ?>
  
  <style>

    html,
    body, 
    .site-container {
      height: 100% !important;
    }

    .sticky-footer-page-wrapper {
      height: auto !important;
      margin-top: 0 !important;
      min-height: 100% !important;
    }
     
    .site-footer {
      margin-top: 0 !important;
      padding-top: 0 !important;
    }

  </style>
  <?php


  /* Sticky Footer JS
  --------------------------------------------- */ ?>

  <script>

    jQuery( function( $ ) {

      /**
       * Sticky Footer JS
       */
      var stickyFooterFunction = function() {

        var viewportHeight = $( window ).height();
        var adminBarHeight = $( '#wpadminbar' ).outerHeight();
        var footerHeight = $( '.site-footer' ).outerHeight();
        var theHeight;

        // Set html height depending on whether the admin bar 
        // is active or not. We only trust the body class and
        // have to cross-check, in case a browser plugin, that 
        // controls the visibility of the admin bar, is in use.
        if ( $( 'body' ).hasClass( 'admin-bar' ) ) {
          theHeight = viewportHeight - adminBarHeight;
        } else {
          theHeight = viewportHeight;
        }

        // Set proper height of the html element.
        document.documentElement.style.setProperty( 
          'height', theHeight + 'px', 'important'
        );

        // Substract the footer height from the page.    
        $( '.sticky-footer-page-wrapper' ).css({ 
          'marginBottom': '-' + footerHeight + 'px'
        });
      }

      // Trigger the function on window load and resize.
      $( window ).on( 'load resize', stickyFooterFunction );
      
      // Account for brower plugins, that control the
      // visibility of the admin bar, and invoke the 
      // function a second time (after some waiting).
      setTimeout( stickyFooterFunction, 1000 );
    });

  </script>
<?php
}

Der Abstand oberhalb des Footers kann mit Hilfe der CSS-Klasse .sticky-footer-spacer eingerichtet werden. Beispiel:

.sticky-footer-spacer {
  height: 50px;
}

Reine CSS-Lösung mit Flexbox

/* Sticky Footer
--------------------------------------------- */

.site-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.site-inner {
  flex-grow: 1;
  width: 100%;
}

.site-header,
.site-footer {
  /* ie11 */
  flex-shrink: 0;
}

Bearbeitet: 2020-03-08
Veröffentlicht: 2016-12-19
Rubrik: Design & Development

Stefan Buchberger

Über den Autor

Stefan Buchberger beschäftigt sich seit vielen Jahren mit der Präsentation, Verbreitung und Kommunikation von Inhalten. Er war vor allem als Buchverleger aktiv.

Heute gilt seine Aufmerksamkeit einer nachhaltigeren Form der Webentwicklung, welche die Inhalte zurück in den Fokus rückt.

Seitenleiste

Neue Beiträge

SiteGround: Renewal Reminders

Sobald sich die Vertragslaufzeit für einen SiteGround-Service (z.B. Hosting oder Domain) ihrem Ende nähert, erhalten …

Wartungsbericht: Begriffe erklärt

Unsere Wartungskunden erhalten regelmäßig einen individuellen Wartungsbericht für ihre Websites. Einige Begriffe, die wir darin …

Internationale Literaturdialoge

Das Projekt Internationale Literaturdialoge möchte innovative Kooperationsprojekte österreichischer Literaten mit Kreativen im Ausland ins Leben …
Mann skizziert Projekt auf Tafel

Wege zur Website: Nach Maß und von der Stange

Websites entstehen individuell und nach Maß oder auf Basis bestehender Vorlagen. Vielfach aber: sowohl als …
Boy singing in microphone

Testimonials: Das sagen unsere Kunden

Im Mittelpunkt eines Projekts steht für uns selbstverständlich die Zufriedenheit des Auftraggebers. Wir freuen uns …

Newsletter

Unser Newsletter mit Tipps und Angeboten erscheint wenige Male im Jahr. Infos zu Versand und Verarbeitung erhalten Sie in unserer Datenschutzerklärung.

    nav-social-menu

    • LinkedIn
    • RSS
  • Impressum
  • Datenschutz
Top ▲
Top ▲
Finde

Zeige alle ...

Generic filters