von Daniel Stahl

Sidebar beim Scrollen der Seite fixieren (jQuery Animation)

Mit dem folgenden Codefragment bleibt eine Sidebar auch während dem Scrollen einer Seite immer im Sichtfeld. Eine jQuery (JavaScript) Funktion lässt die Sidebar langsam an die richtige Position fahren. Grundvoraussetzung ist das Einbinden von Jquery, siehe Blogeintrag: Contao 3 - jQuery- und MooTools Konfiguration im Template

 

$(document).ready(function() {
  $(function() {
    var offset = $("#sidebar").offset();
    var topPadding = 35;
    var topMargin = 20;
    var animateSpeed = 200;
    $(window).scroll(function() {
      if ($(window).scrollTop() > offset.top) {
        $("#sidebar").stop().animate({
          marginTop: $(window).scrollTop() - offset.top + topPadding
        },animateSpeed);
      } else {
        $("#sidebar").stop().animate({
          marginTop: topMargin
        },animateSpeed);
      }
    }); // END window scroll
  }); // END function
}); // END document ready

 

Beispielhaft auf dieser Seite zu sehen: http://daniel-stahl.com/referenzen

 

Funktionsbeschreibung:

 

ID der Sidebar
#sidebar
Variable: topPadding
Im gescrollten Zustand, der Abstand der Sidebar zum oberen Rand des Browsers.
Variable: topMargin
Im nicht gescrollten Zustand, der Abstand der Sidebar zum Element darüber.
Variable: animateSpeed
Animationsgeschwindigkeit der Sidebar.

Zurück