1. Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!
    Information ausblenden

[ERLEDIGT] Scrollfix und Ankerlinks kombinieren?

Dieses Thema im Forum "JavaScript" wurde erstellt von Curved, 18 Mai 2017.

  1. Curved

    Curved Neues Mitglied

    Registriert seit:
    9 Mai 2017
    Beiträge:
    12
    Punkte für Erfolge:
    1
    Hallo zusammen,

    ich habe auf meiner Seite folgendes Script, dass mir eine fixierte Navigation ermögllicht, sobald 50px gescrollt wurden:
    HTML:
    1. var startPos;
    2.   $(document).ready(function(){
    3.     window.scrollTo(0,0);
    4.     startPos = $("nav").offset().top;
    5.   });
    6.  
    7.   $(window).scroll(function(){
    8.     if ($(document).scrollTop()>startPos-50) {
    9.       $( "nav" ).addClass('fixed-navi');
    10.       } else {
    11.       if ($( "nav" ).hasClass( 'fixed-navi' )){
    12.       $( "nav" ).removeClass('fixed-navi');
    13.     }}
    14.   });
    Jetzt habe ich natürlich das Problem, dass sobald ich von einer Unterseite über einen Ankerlink zu einer anderen verlinke, das Ziel nicht erreicht wird, weil das Script sofort nach ganz oben scrollt (window.scrollTo(0,0);).
    Diese Funktion wird allerdings dafür benötigt, damit das Script weiß wann die Navigation festgemacht werden soll.

    Gibt es hier eine Möglichkeit, die Funktionalität des Scripts zu erhalten und trotzdem auf Ankerlinks zwischen unterschiedlichen Unterseiten springen zu können?

    Vielen Dank für eure Hilfe!

    Curved
     
    Werbung:

    Jetzt registrieren, damit diese Werbung verschwindet
  2. scbawik

    scbawik Senior HTML'ler

    Registriert seit:
    14 Juli 2011
    Beiträge:
    2.232
    Punkte für Erfolge:
    83
    Schwer zu beantworten ohne das ganze drumherum zu sehen.
    Der Inhalt von $(document).ready ist jedenfalls der falsche Ansatz. Das kannst du alles in einen scroll-listener packen und das Scroll-Event gleich zu beginn triggern:

    Code (text):
    1. $(window)
    2.   .scroll(function(){
    3.     // ...
    4.   })
    5.   .scroll(); // <---
     
    Curved gefällt das.
  3. Curved

    Curved Neues Mitglied

    Registriert seit:
    9 Mai 2017
    Beiträge:
    12
    Punkte für Erfolge:
    1
    Stimmt, das habe ich so noch gar nicht bedacht. Eigentlich muss ich ja nur abfragen, wann das Fenster 50px vom oberen Rand entfernt gescrollt wurde. Nach meinem Verständnis sollte das dann ja so funktionieren:
    HTML:
    1. $(window).scroll(function(){
    2.   if $(document).scrollTop(50) {
    3.     $( "nav" ).addClass('fixed-navi');
    4.   } else {
    5.     if ($( "nav" ).hasClass( 'fixed-navi' )){
    6.     $( "nav" ).removeClass('fixed-navi');
    7.     }
    8.   }
    9. });
    Tut es leider nicht. Was mache ich falsch?
     
    Zuletzt bearbeitet: 18 Mai 2017
  4. scbawik

    scbawik Senior HTML'ler

    Registriert seit:
    14 Juli 2011
    Beiträge:
    2.232
    Punkte für Erfolge:
    83
    Code (text):
    1. if $(document).scrollTop(50) {
    Ist keine gültige Syntax.
    Code (text):
    1. if ($(document).scrollTop() > 50) {
     
    Curved gefällt das.
  5. Curved

    Curved Neues Mitglied

    Registriert seit:
    9 Mai 2017
    Beiträge:
    12
    Punkte für Erfolge:
    1
    Vielen Dank! :)

    Jetzt habe ich nur das Problem, das sich mein Slider ja in der Größe je nach Viewport verändert und ich so nicht immer einen festen Wert für die Höhe angeben kann. Deswegen war ja auch die Lösung davor mit der Berechnung des Abstands der zweiten Navigation zum oberen Bildschirmrand. Damit der immer stimmt, musste natürlich erstmal ganz nach oben gescrollt sein.

    Gibt es dafür einen Workaround, dass ich die richtige Slider-Höhe kriege ohne die Seiten selbst nach oben scrollen zu lassen?
     
    Zuletzt bearbeitet: 18 Mai 2017
  6. scbawik

    scbawik Senior HTML'ler

    Registriert seit:
    14 Juli 2011
    Beiträge:
    2.232
    Punkte für Erfolge:
    83
    Frag einfach die entsprechende Höhe statt den 50px ab:
    Code (text):
    1. if ($(document).scrollTop() > $( "nav" ).height()) {
     
    Curved gefällt das.
  7. Curved

    Curved Neues Mitglied

    Registriert seit:
    9 Mai 2017
    Beiträge:
    12
    Punkte für Erfolge:
    1
    Da habe ich mich oben wahrscheinlich etwas falsch ausgedrückt: Ich brauche nicht die Höhe der Nav, sonder die des Sliders zwischen den beiden Navigationen und muss davon die 50px (die Höhe der oberen Navigation) abziehen, aber das habe ich sogar selbst hingekriegt :cool:

    HTML:
    1. $(window).scroll(function(){              
    2.   if ($(document).scrollTop() > ($( ".slider" ).height()-50)) {
    3.     $("nav").addClass('fixed-navi');
    4.     } else {
    5.       if ($("nav").hasClass('fixed-navi')){
    6.         $("nav").removeClass('fixed-navi');}
    7.       }
    8. });
    Vielen, vielen Dank nochmal für deine Geduld und Hilfe! :)