✔ Sprung zu Anker mit fixed Element

[jemand anders]

Hallo,

https://jsfiddle.net/qs85ar55/

G2 und g3 sollen genauso sichtbar sein wie g4, wenn die entsprechenden Links oben geklickt werden, d. h. sie müssten um 50 Pixel nach unten geschoben werden (roter Balken), bei g4 ist es noch ein anderer Wert.

Weiß jemand, wie es geht?

Grüße

 

[SpiceLab]

G2 und g3 sollen genauso sichtbar sein wie g4, wenn die entsprechenden Links oben geklickt werden, d. h. sie müssten um 50 Pixel nach unten geschoben werden (roter Balken)

Weiß jemand, wie es geht?

Zumindest nicht mit CSS (= Deine Wahl des Forums).

Hierfür bietet sich, wie schon in deinem letzten Thema https://www.tutorials.de/threads/scroll.403985/, .scrollTop() an, um die Scrollposition abzüglich der Höhe von #d1 zu definieren.

 

[jemand anders]

Ich habe es jetzt mit dieser Lösung ans Laufen bekommen, allerdings direkt in meiner Anwendung. In der Fiddle läuft es irgendwie nicht. Ich habe die Fiddle trotzdem mal um die Funktion ergänzt, auch wenn es nicht läuft.

Meine Lösung in der Anwendung sieht jetzt so aus:

$('a').click(function() {

    if (this.hash != '' && this.href.indexOf('#') > -1) {

      if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') ||
          location.hostname == this.hostname) {
      
        var target = $(this.hash),
        headerHeight = $("nav").height() + 5;
          
        target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
     
        if (target.length) {

          $('html,body').animate({
            scrollTop: target.offset().top - headerHeight
          }, 500);
          return false;
        }
      }
    }
});