von Der Cookie-Banner auf sehr vielen Seiten hat einen unschönen Nebeneffekt: Er überdeckt den unteren Teil der Seite bzw. den Footer. Das kann kritisch sein, wenn man dort Links zum Impressum und Kontaktformular angebracht hat und diese nicht nochmals im Header der Seite vorkommen. Um auch hier keine Probleme zu bekommen habe ich bei mir dafür gesorgt, dass der Footer möglichst immer erreichbar ist.
Hierzu habe ich mein erweitertes Cookieconsent.js-Skript aus dem letzten Artikel um folgenden Code erweitert:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
// set height so nothing gets hidden behind the cookie-banner var width = document.getElementById('container').offsetWidth; if (width>1024){ var space = 100; } else { var space = 300; } if (getCookie("cookieconsent_status")==="") { var siteHeight = $("html").height() + space; $("html").height(siteHeight); } |
Die Funktionsweise ist recht simpel. Je nachdem welche Breite das Element „container“ hat, hier müsste man ein Seiten-spezifisches Element wählen, setze ich in der Variable „space“ einen Wert in Pixeln. Dies wird der Abstand um den die Webseite unten verlängert wird, damit man weiter herunterscrollen kann.
Wenn das Cookie nicht gesetzt ist wird dann die Höhe des Elements „html“, also des ganzen Dokuments, geholt und um den wert aus der Variable „space“ erhöht. Abschließend wird die Höhe des Elements „html“ dann mit diesem neuen Wert abgeändert. Dadurch entsteht unter dem Footer genug Freiraum für den Cookie-Banner.
