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

savuti

Lt. Commander

Registriert

Jan. 2010

Beiträge

1.710

• 20. Mai 2016

• #1

Hallo,

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

Code:

<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

Lt. Commander

Registriert

Mai 2008

Beiträge

1.661

• 20. Mai 2016

• #2

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

Lt. Commander

Ersteller dieses Themas

Registriert

Jan. 2010

Beiträge

1.710

• 20. Mai 2016

• #3

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.

 

Zuletzt bearbeitet: 20. Mai 2016

NullPointer

Lt. Commander

Registriert

Okt. 2009

Beiträge

1.570

• 20. Mai 2016

• #4

Hilft dir vielleicht das weiter?

 

M

micha-ilm

Gast

• 20. Mai 2016

• #5

EDIT:
Sorry Missverständnis!

Hier der richtige Code:

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.

 

Zuletzt bearbeitet: 20. Mai 2016

savuti

Lt. Commander

Ersteller dieses Themas

Registriert

Jan. 2010

Beiträge

1.710

• 20. Mai 2016

• #6

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.

 

M

micha-ilm

Gast

• 20. Mai 2016

• #7

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

 

savuti

Lt. Commander

Ersteller dieses Themas

Registriert

Jan. 2010

Beiträge

1.710

• 20. Mai 2016

• #8

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

"Uncaught SyntaxError: Unexpected token ;"

bei:

Code:

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

 

M

micha-ilm

Gast

• 20. Mai 2016

• #9

ah da fehlt ein ) nach function(

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

 

savuti

Lt. Commander

Ersteller dieses Themas

Registriert

Jan. 2010

Beiträge

1.710

• 20. Mai 2016

• #10

Perfekt! Vielen Dank!

 

M

micha-ilm

Gast

• 20. Mai 2016

• #11

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

Lt. Commander

Ersteller dieses Themas

Registriert

Jan. 2010

Beiträge

1.710

• 20. Mai 2016

• #12

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