Wie überprüft man ständig die aktuelle Fensterhöhe der Webseite?

Question

Ich habe eine Navbar auf einer Website und nach Erreichen eines bestimmten Punktes der Höhe (Y-Achse). Ich möchte den CSS-Code meiner Navbar zum Beispiel die Hintergrundfarbe manipulieren.

So weit so gut jetzt überprüfe ich mit einer if-Anweisung die Höhe und wenn sie einen bestimmten Wert überwindet manipuliere ich die CSS der Navbar-Klasse .... aber wie kann ich sicherstellen, dass diese ständig überprüft wird habe ich die benutzt setInterval Methode, aber ich bin mir nicht sicher, ob das eine gute Lösung ist ... wer kann mir helfen?

Vielen Dank im Voraus!

function update() { 
    if (currentHeight>600) { 
    $(".class").css({"background-color":"blue"}); 
    } else { 
    $(".class").css({"background-color":"transparent"}); 
    } 
} 

setInterval(update, 10); 

Answer 1

Sie können es mit jQuery wie folgt tun:

$(window).resize(function() { 
    if ($(window).height()>600) { 
    $(".class").css({"background-color":"blue"}); 
    } else { 
    $(".class").css({"background-color":"transparent"}); 
    } 
}); 

Sie können es auch tun, ohne Jquery mit CSS @media tags:

.class { 
    background-color:blue; 
} 

@media screen and (max-height: 600px) { 
    .class { 
    background-color:transparent; 
    } 
} 

Answer 2

Wenn Sie CSS ändern möchten, wenn Ihr Bildschirm ist zu klein, Sie benötigen möglicherweise nicht jQuery:

@media screen and (max-height: 600px) { 
    .class {background-color:transparent} 
}