'if the browser window is below a certain height addClass to an element [closed]

I would like to addClass to an element if the browser window is below a certain size via height; when and only if the height is below a certain point.

Using jQuery how could I detect current browser height and below for this to occur?

jquerycss


Solution 1:[1]

$(window).resize(function() {
    if ($(window).height() < 500) {
        $('.element').addClass('className');
    }
});

Solution 2:[2]

While JavaScript is a possible option for this, it's quite an inefficient one at many times. If you are able to use CSS, you can use Media Queries.

Here's an example:

html > body {
  background: blue;
}
@media screen and (max-height: 500px) {
  body {
    background: red !important;
  }
}
<html>

<body></body>

</html>

If you run that, when the page is less than 500px high, the background will be red. Otherwise, it will be blue.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 upss1988
Solution 2

Related Questions