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?