Javascript / wenn gescrollt wurde andere class vergeben

[meaus]

Hallo

ich habe ein Problem und hoffe, dass ihr mir helfen könnt.
Ich arbeite an einer Website, die eine fixe Navigation hat, diese ist am oberen Browserrand platziert.
Sobald auf der Seite aber gescrollt wird, soll eine andere bzw eine kleinere Version der Navigation eingeblendet werden.

Nun mein Problem: Ich bin in HTML und CSS topfit, bei javascript hängts allerdings etwas.
Ich dachte mir, ich kann per JS abfragen, ob auf der Seite gescrollt wurde, und wenn ja dem Navi-Div einfach eine andere class vergeben.. würde das funktionieren? Und wie gehe ich das am besten an? Ich suche mich schon seit einer Weile durchs Netz, allerdings werden als Lösungsansätze bei JS irgendwie immer nur einzelne Wörter in den Raum geworfen, die mir als JS Kack**** so ohne Zusammenhang leider kein bisschen weiterhelfen..

Würde mich über eine Antwort freuen
Liebe Grüße

 

[Quaese]

Hi,

das sollte möglich sein. Du musst den scroll-Event des window-Objekts überwachen. Anhand des scrollTop-Wertes entscheidest du, welche CSS-Klasse verwendet werden soll.

Mit jQuery könnte das wie folgt aussehen:

$(window).on('scroll', function(){
  var scrollTop = $('body').scrollTop(),
    navElement = $('#navElement');
  
  if(scrollTop === 0){
    navElement
      .removeClass('smallNav')
      .addClass('bigNav');
  }else{
    navElement
      .removeClass('bigNav')
      .addClass('smallNav');
  }
});

Vielleicht hilft dir das weiter.

Ciao
Quaese

 

[meaus]

Super danke, habs hinbekommen!