'mediaMatch not working when resizing window

I am trying to add a javascript to check the width of the window and produce a different styling depending on if above or below a specific media breakpoint. All seems to work as expected however when I transition between the two breakpoints it breaks and I can see in the dev tools that the styling doesn't update. If I then refresh all looks right again.

Sample Code:

if (window.matchMedia("(min-width: 768px)").matches) {
  this.$obj.show().delay(200).animate({'bottom': '0'}, 1000);
} else {
  this.$obj.show().delay(200).animate({'top': '0'}, 1000);
}

How can I make this work when expanding and contracting the window as opposed to just on initial page load?

javascript

Sources

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

Source: Stack Overflow

Solution	Source

'mediaMatch not working when resizing window

Sources

Related Questions