• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

[ERLEDIGT] Scrollfix und Ankerlinks kombinieren?

Curved

Neues Mitglied
Hallo zusammen,

ich habe auf meiner Seite folgendes Script, dass mir eine fixierte Navigation ermögllicht, sobald 50px gescrollt wurden:
HTML:
var startPos;
  $(document).ready(function(){
    window.scrollTo(0,0);
    startPos = $("nav").offset().top;
  });

  $(window).scroll(function(){
    if ($(document).scrollTop()>startPos-50) {
      $( "nav" ).addClass('fixed-navi');
      } else {
      if ($( "nav" ).hasClass( 'fixed-navi' )){
      $( "nav" ).removeClass('fixed-navi');
    }}
  });
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:
Hallo zusammen,

ich habe auf meiner Seite folgendes Script, dass mir eine fixierte Navigation ermögllicht, sobald 50px gescrollt wurden:
HTML:
var startPos;
  $(document).ready(function(){
    window.scrollTo(0,0);
    startPos = $("nav").offset().top;
  });

  $(window).scroll(function(){
    if ($(document).scrollTop()>startPos-50) {
      $( "nav" ).addClass('fixed-navi');
      } else {
      if ($( "nav" ).hasClass( 'fixed-navi' )){
      $( "nav" ).removeClass('fixed-navi');
    }}
  });
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

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:
$(window)
  .scroll(function(){
    // ...
  })
  .scroll(); // <---
 
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:
$(window).scroll(function(){
  if $(document).scrollTop(50) {
    $( "nav" ).addClass('fixed-navi');
  } else {
    if ($( "nav" ).hasClass( 'fixed-navi' )){
    $( "nav" ).removeClass('fixed-navi');
    }
  }
});
Tut es leider nicht. Was mache ich falsch?
 
Zuletzt bearbeitet:
Werbung:
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:
$(window).scroll(function(){
  if $(document).scrollTop(50) {
    $( "nav" ).addClass('fixed-navi');
  } else {
    if ($( "nav" ).hasClass( 'fixed-navi' )){
    $( "nav" ).removeClass('fixed-navi');
    }
  }
});
Tut es leider nicht. Was mache ich falsch?

Hier ist übrigens die Seite: jp.mediago.de

Code:
if $(document).scrollTop(50) {
Ist keine gültige Syntax.
Code:
if ($(document).scrollTop() > 50) {
 
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:
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?

Seite: http://jp.mediago.de

Frag einfach die entsprechende Höhe statt den 50px ab:
Code:
if ($(document).scrollTop() > $( "nav" ).height()) {
 
Werbung:
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:
$(window).scroll(function(){               
  if ($(document).scrollTop() > ($( ".slider" ).height()-50)) {
    $("nav").addClass('fixed-navi');
    } else {
      if ($("nav").hasClass('fixed-navi')){
        $("nav").removeClass('fixed-navi');}
      }
});

Vielen, vielen Dank nochmal für deine Geduld und Hilfe! :)
 
Zurück
Oben