JavaScript jQuery value abhängig von Viewport-Größe

[savuti]

Hallo,

ich hab hier einen kleinen Schnipsel in dem "value" sich an die Breite des Viewports anpassen soll.

<script>
$(window).scroll( function() {
    var value = $(this).scrollTop();
    if ( value > 180 ) {
        $("#header-fix").addClass("stickyHeader");
    } else {
       	$("#header-fix").removeClass("stickyHeader");
    }
});
</script>

Bei einer Bildschirmbreite von unter 1160px anstatt 180 der Wert 150, bei unter 960px der Wert 80 etc...

Jemand eine Idee?

Grüße,
savuti

 

[violentviper]

Du sagst deine Lösung im Prinzip schon richtig. Nur deine if-Anfrage stimmt nicht damit überein. Zudem steht in value so wie ich es sehe, noch gar nicht die Breite, die du abfragen willst.

 

[savuti]

Das Script funktioniert ja. Bei einer Bildschirmgröße über 1159px alles i.O. Da mein #header-fix aber bei kleineren Auflösungen eine geringere Höhe hat, "greift" das Script halt etwas zu spät. Es geht darum "( value > 180 )" in Abhängigkeit der Auflösung zu gestalten.

Also wenn Auflösung kleiner als 1160px dann z.B. "( value > 150 )", wenn kleiner als 960px dann "( value > 80 ) und so weiter.

 

[NullPointer]

Hilft dir vielleicht das weiter?

 

[micha-ilm]

EDIT:
Sorry Missverständnis!

Hier der richtige Code:

<script>
var scroll_th = 180;

function set_scroll() {       // alternativ mit switch-case falls es mehr causes werden
w_width = $(document).width();
if (w_width < 1160) {
      if (w_width < 960) {
           scroll_th = 80;
              }
      else {
           scroll_th = 150;
             }
}
else {
      scroll_th = 180; }
}

$(document).ready(function(){
set_scroll();
});
$(window).resize(function(){
set_scroll();
});

$(window).scroll( function() {
    var value = $(this).scrollTop();
    if ( value > scroll_th ) {
        $("#header-fix").addClass("stickyHeader");
    } else {
       	$("#header-fix").removeClass("stickyHeader");
    }
});
</script>

Wobei ich davon ausgehe, dass sich die 180 ja von irgend einer height ableiten lassen.
Das wäre dann der bessere Weg.

 

[savuti]

Ich mache das ja schon über Media Queries. .stickyHeader wird je nach Auflösung anders interpretiert. Jedoch _wann_ #header-fix die Klasse stickyHeader bekommt, hängt vom Wert 180 ab. Nach 180 Pixeln scrollen wird die Klasse stickyHeader angehangen.

Da #header-fix durch Media-Queries in verschiedenen Auflösungen eine andere Höhe hat, soll bei kleineren Auflösungen schon früher .stickyheader anhängen. Das kann ich nicht mit CSS steuern, weil es kein CSS ist.

 

[micha-ilm]

Sorry war ein kleiner Brainfart meiner seits. Habe den Post/Code angepasst. Sorry!

 

[savuti]

Danke Dir! Das scheint genau das zu sein was ich suche. Nur bekomme ich einen Fehler:

"Uncaught SyntaxError: Unexpected token ;"

bei:

$(document).ready(function({
set_scroll();
});

 

[micha-ilm]

ah da fehlt ein ) nach function(

Hab den code bearbeitet.
Es heisst auch $(window).resize

 

[savuti]

Perfekt! Vielen Dank!

 

[micha-ilm]

Für resize sollte evtl. noch eine Anweisung mit rein um es wieder auf 180 zu setzen, falls das Fenster wieder groß genug ist. (EDIT: Hab's oben ergänzt)

Du kannst alternativ auch mit .height() die Höhe von jedem DOM-Element auslesen.
Und das dann in direkte Abhängigkeit zu der Variable setzen.
Ist meiner Meinung nach die bessere Variante.

 

[savuti]

Verstehe was du meinst, aber das bekomme ich mit meinen bescheidenden JS-Kenntnissen nicht umgesetzt.