Hey, Im working on a project where an element changes when the user scrolls a specified amount down the page...The code I have works but the problem is that I need to add a media query so I can change the scroll amount depending on the screen size. I have read some blogs on how to do this but can't seem to get it to work...Any ideas??
Code:
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 400) {
$(".main-body").addClass("fixed-nav-margin");
} else {
$(".main-body").removeClass("fixed-nav-margin");
}
});
The best thing to use for this is probably just window.innerWidth (I think there's some weirdness with this in old IE - but jQuery's $(window).width() sorts that).
If you need full-on Media Queries, you could use window.matchMedia.
Hey, Im working on a project where an element changes when the user scrolls a specified amount down the page...The code I have works but the problem is that I need to add a media query so I can change the scroll amount depending on the screen size. I have read some blogs on how to do this but can't seem to get it to work...Any ideas??
Code:
$(window).scroll(function() { var scroll = $(window).scrollTop(); if (scroll >= 400) { $(".main-body").addClass("fixed-nav-margin"); } else { $(".main-body").removeClass("fixed-nav-margin"); } });The best thing to use for this is probably just
window.innerWidth(I think there's some weirdness with this in old IE - but jQuery's $(window).width() sorts that).If you need full-on Media Queries, you could use
window.matchMedia.https://developer.mozilla.org/en/docs/DOM/window.innerWidth http://api.jquery.com/width/ https://developer.mozilla.org/en-US/docs/DOM/window.matchMedia
Thanks rosspenman...got it to work!