Fixed-To-Scroll Navigation

**jack_typewriter** · 27.02.2016, 18:38

Hallo liebe Gemeinde,

ich habe auf meiner Website http://www.marco-kroener.de einen Scroll-To-Fixed-Bereich oben eingebaut - klappt auch soweit, eines würde ich hieran noch gerne optimieren, nur weiß ich momentan noch nicht, wie ich das vernünftig hinbekomme. Und zwar soll der Übergang zum Fixed nicht so abrupt erfolgen, sondern eben geschmeidig (Stichwort smooth), wie es bei vielen anderen Seiten auch der Fall ist. Kann mir jemand Hilfestellung leisten, wie ich das noch hinbekomme?

VG

**Samuell** · 27.02.2016, 19:09

Ohne Dir zu nahe treten zu wollen, aber irgendwie beißt sich Deine Frage etwas mit dem was Du laut Deiner Seite beruflich anbietest.
Sicher, man kann nicht alles wissen. Aber das sind eigentlich CSS-Grundlagen. Sehr verwirrend.

Du kannst in CSS einen Übergangseffekt definieren, der dann den Übergang zwischen 2 Zuständen animiert.
"transition" heißt das Zauberwort.

**jack_typewriter** · 27.02.2016, 19:36

Da hast du nicht ganz unrecht, solche Feinheiten lasse ich bei Kundenprojekten durch externe Partner erledigen. Da ich aber auch selbst lernen will, habe ich gefragt. Habe es aber auch inzwischen bei anderen Seite mit transitions gelöst. Dachte aber, dass es evtl. auch mit jquery gemacht werden könnte.

**Samuell** · 27.02.2016, 21:19

Nimm CSS wenn Du kannst.

Ich zitiere aus dem Gedächtnis eine Kollegin aus dem Forum:
"Warum sollte ich JS benutzen, wenn ich das auch mit CSS erledigen kann".

Jedes zusätzliche JS ist nur noch mehr Ballast, wenn man es nicht zwingend für eine Funktion braucht.

**jack_typewriter** · 28.02.2016, 10:30

Du hast Recht. Hatte das gestern noch mit css gelöst bekommen. Es handelt sich um folgende Seite: http://kaster-miniaturen.marco-kroener.de.
Ein Problem habe ich hier noch. Vielleicht weiß hierzu auch jemand Rat. Beim Navigieren springt die Der Fokus nicht gleichermaßen in gescrolltem (Header wird niedriger) und ungescrolltem Zustand. In gescrolltem Zustand passt es, in ungescrolltem Zustand springt man zu weit.

Folgenden Code habe ich genutzt:

Code:

<script>
var lastId,
    topMenu = $(".navbar"),
    topMenuHeight = topMenu.outerHeight()+40,
    menuItems = topMenu.find("a"),
    scrollItems = menuItems.map(function(){
      var item = $($(this).attr("href"));
      if (item.length) { return item; }
    });

menuItems.click(function(e){
  var href = $(this).attr("href"),
      offsetTop = href === "#" ? 1 : $(href).offset().top-topMenuHeight+1;
  $('html, body').stop().animate({ 
      scrollTop: offsetTop
  }, '1500' , 'swing');
  e.preventDefault();
});

$(window).scroll(function(){
   var fromTop = $(this).scrollTop()+topMenuHeight;
   
   var cur = scrollItems.map(function(){
     if ($(this).offset().top < fromTop)
       return this;
   });
   cur = cur[cur.length-1];
   var id = cur && cur.length ? cur[0].id : "";
   
   if (lastId !== id) {
       lastId = id;
       menuItems
         .parent().removeClass("active")
         .end().filter("[href=#"+id+"]").parent().addClass("active");
   }                   
});
</script>

<script>$(window).scroll(function() {
    if ($(this).scrollTop() > 1){  
        $('#header').addClass("sticky");
    }
    else{
        $('#header').removeClass("sticky");
    }
});
</script>