Header scroll fixieren

**Michi Löffler** · 07.10.2015, 19:43

Hallo zusammen

Ich habe das Theme für einen Kunden installiert (www.loeffler-web.ch/tao). Nun hat er den Wunsch, dass der Header fix bleibt. Also wenn man mit der Maus runterscrollt, die oberste Zeile mit den Ortschaften und Kontaktangaben fix stehen bleibt und das Logo sich nicht verkleinert.

Kann mir einer sagen, wie ich das machen kann ? Welches Script muss ich da stoppen oder entfernen, dass die oberste Zeile bleibt und das Logo sich nicht verkleinert ?

Vielen Dank und Grüsse
Michi

**Andreas** · 08.10.2015, 02:38

Da bekommst du doch bestimmt viel leichter eine Antwort beim Support von Rocksolid dem Theme-Entwickler/Anbieter.

**Franko** · 08.10.2015, 07:56

Mit jQuery:

Code:

(function($){ 
  $(document).ready(function(){


      $(".mod_navigation").wrap( "<div id='nav_wrapper'></div>" );
      var myNav = $(".mod_navigation").offset().top;
      var myElement = $("#nav_wrapper");

      $(window).scroll(function(){
        if( $(window).scrollTop() > myNav ) { 
          myElement.addClass("stick small"); 
        } 
        else { 
          myElement.removeClass("stick small"); 
        }
      });
  })
})(jQuery);

Das Script erstellt einen zusätzlichen Block um die Navigation und fügt diesem dann Klassen hinzu bzw. entfernt die Klassen wieder.
Diese können dann mit CSS bel. angesprochen werden z.B: .stick { position: fixed; } ...

Oder man nutzt Plugins ala Waypoint.js ( mit Sticky Elements ): http://imakewebthings.com/waypoints/