Ergebnis 1 bis 6 von 6

Thema: jQuery Variable 50px vom oberen Fensterrand erkennen

  1. #1
    Youngster
    Registriert seit
    13.09.2016
    Beiträge
    14
    Danke
    3
    Bekam 0 mal "Danke" in 0 Postings

    Frage jQuery Variable 50px vom oberen Fensterrand erkennen

    Hallo zusammen,

    ich habe ein kleines Script, dass mir ermöglicht zu erkennen, wann ein Element durch scrollen den oberen Fensterrand erreicht. Anschließend wird ihm eine andere Klasse zugeteilt. Das ganze ist ein einfacher "ScrollFix".
    Jetzt möchte ich allerdings die Klasse ändern sobald das Element 50px vom oberen Rand entfernt ist (soweit gescrollt wurde). Ich habe mit meiner bisherigen Recherche leider nicht herausgefunden wie.

    Code:
    $(document).ready(function(){
             window.scrollTo(0,0);
             startPos = $("nav").offset().top;
        });
         
        $(window).scroll(function(){
         if ($(document).scrollTop()>startPos) {
            $( "nav" ).addClass('fixed-navi');
         } else {
            if ($( "nav" ).hasClass( 'fixed-navi' )){
                $( "nav" ).removeClass('fixed-navi');
            }
         }
        });
    Ich denke, dass man im Bereich
    Code:
    startPos = $("nav").offset().top;
    eventuell 50px dazurechnen kann.

    Kann mir hier jemand helfen?

    Vielen Dank!
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    Meister(in)
    Registriert seit
    24.10.2016
    Beiträge
    340
    Danke
    0
    Bekam 31 mal "Danke" in 30 Postings

    Standard AW: jQuery Variable 50px vom oberen Fensterrand erkennen

    Hast du denn mal versucht, einfach +50 reinzuschreiben?

  3. #3
    Youngster
    Themenstarter

    Registriert seit
    13.09.2016
    Beiträge
    14
    Danke
    3
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: jQuery Variable 50px vom oberen Fensterrand erkennen

    Ja, das hat allerdings nichts gebracht.

    Hier sind auch nochmal die beiden API-docs zu

    offset()
    https://api.jquery.com/offset/

    und scrollTop()
    https://api.jquery.com/scrollTop/

    falls das weiterhelfen kann. Ich bin mir leider nicht sicher, wie man das angehen muss.

    - - - Aktualisiert - - -

    Ich habe es herausgefunden. Der Denkansatz war falsch.

    Die aktuelle Position vom oberen Bildschirmrand wird ermittelt:
    Code:
    startPos = $("nav").offset().top;
    Wenn der scroll nach oben größer ist, als die oben ermittelte position wird die Klasse angepasst:
    Code:
    if ($(document).scrollTop()>startPos){
    Demnach muss von startPos 50 abgezogen werden, damit das Ergebnis wie gewünscht ist:
    Code:
    if ($(document).scrollTop()>startPos-50)

  4. #4
    Moderator Avatar von Arne Drews
    Registriert seit
    20.01.2016
    Ort
    Friedrichstadt, NF
    Beiträge
    1.224
    Danke
    21
    Bekam 120 mal "Danke" in 119 Postings

    Standard AW: jQuery Variable 50px vom oberen Fensterrand erkennen

    Sorry, aber warum benötigt man dazu jQuery?
    Das kann man auch mit reinem JS machen:
    Code:
    window.onload = function() {
    
      window.scrollTo( 0, 0 );
      var oNavElement = document.querySelector( "nav" );
      var iDistance = 50;
    
      window.addEventListener( "scroll", function() {
    
        bAddClass = ( window.scrollY > oNavElement.scrollTop - iDistance );
    
        if ( bAddClass )
          oNavElement.setAttribute( "class", "fixed-navi" );
        else
          oNavElement.removeAttribute( "class" );
    
      });
    
    };
    Anti-Mod Texte in der Signatur, aber PN sperren, weil man der selbst entfachten Diskussionsgrundlage nicht gewachsen ist?! Das zeugt von Reife...

    http://www.php-rocks.de
    » Tutorials

  5. #5
    Youngster
    Themenstarter

    Registriert seit
    13.09.2016
    Beiträge
    14
    Danke
    3
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: jQuery Variable 50px vom oberen Fensterrand erkennen

    Völlig richtig, allerdings benötige ich jQuery an anderer Stelle noch, deswegen gleich damit umgesetzt.
    Sollte das wegfallen bin ich auf jeden Fall dankbar für deinen JS-Code!

  6. #6
    Moderator Avatar von Arne Drews
    Registriert seit
    20.01.2016
    Ort
    Friedrichstadt, NF
    Beiträge
    1.224
    Danke
    21
    Bekam 120 mal "Danke" in 119 Postings

    Standard AW: jQuery Variable 50px vom oberen Fensterrand erkennen

    Wenn man es an anderer Stelle benötigt, ist das halt so, dann ist das wenigstens nicht ganz sinnfrei...

    Kleiner Tipp: Bei Verwendung von JavaScript-Komponenten ruhig mal detaillierter informieren.
    Vieles geht mit reinem JS, das ein oder andere vielleicht sogar effizienter!
    Bei Animationen usw. ist man mit jQuery gut bedient, aber ansonsten geht wirklich vieles auch ohne.

    Gruß Arne
    Anti-Mod Texte in der Signatur, aber PN sperren, weil man der selbst entfachten Diskussionsgrundlage nicht gewachsen ist?! Das zeugt von Reife...

    http://www.php-rocks.de
    » Tutorials

  7. Folgende User finden die Antwort von Arne Drews gut:


Ähnliche Themen

  1. Tabelle am oberen Websiterand
    Von !Florian im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 19.08.2010, 16:51
  2. CSS Lücke am oberen Rand und überlapende Objekte
    Von nieselfriem im Forum HTML & CSS Forum
    Antworten: 4
    Letzter Beitrag: 22.05.2007, 14:26
  3. Abstände zum Fensterrand?
    Von Foulfang im Forum HTML & CSS Forum
    Antworten: 8
    Letzter Beitrag: 04.09.2005, 11:06
  4. Wie kirege ich meinen banner in den oberen ecken...
    Von GIGU im Forum HTML & CSS Forum
    Antworten: 7
    Letzter Beitrag: 14.09.2004, 21:42
  5. Anker: immer zum oberen Fensterrand springen
    Von ComputerFee im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 27.08.2004, 17:48

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •