3 Spalten im Footer responsive gestalten

[Rolf B]

Hallo Marcel,

mir ist was anderes aufgefallen. Wenn die Navigation in den Sticky-Mode schaltet, macht der Seiteninhalt einen Ruck nach oben. Das liegt daran, dass die Navigation aus dem Dokumentenfluss herausgenommen wird und der Rest nach oben rutscht. Das ist nur unschön, aber es geht noch schlimmer. Auf einem genügend hohen Bildschirm (ich habe einen 16:10 Monitor mit 1200px vertikal) kommt die sticky-Logik ins Flattern. Weil die Seite nach dem Umschalten zu kurz für den Bildschirm ist, scrollt sie zurück, der pageYOffset unterschreitet die sticky-Schwelle wieder und sticky wird wieder entfernt. Das geht eine Weile hin und her, dann findet er einen stabilen Punkt. Das kann auch in eine Endlosschleife gehen.

Die Navigation auf sticky setzen reicht also nicht. Du musst den Platz, den sie einnahm, mit etwas füllen. Eine Möglichkeit ist margin-top des content-Blocks. Das geht allerdings schlecht mit CSS, weil die Höhe des Navigationsbereichs nicht fix ist. Man kann's vielleicht mit calc() irgendwie berechnen, aber ich würde es im Script machen.

window.onscroll = function() {myFunction()};

var navigation = document.getElementById("navigation");
var content =  = document.getElementById("content");
var sticky = navigation.offsetTop;

function myFunction() {
  if (window.pageYOffset >= sticky) {
    // Klasse und Margin nur setzen wenn Sticky noch nicht da ist, sonst
    // wird der falsche Margin berechnet!
    if (!navigation.classList.contains("sticky")) {
       content.style.marginTop = (content.offsetTop-sticky)+"px";
       navigation.classList.add("sticky");
    }
  } else {
    content.style.marginTop = "";
    navigation.classList.remove("sticky");
  }
}

Damit ist's dann smooth.

Rolf