Make jQuery act dynamically depending on the width of the window

Question

Hello! I've been learning jQuery for a little while now and am trying to sharpen my skills by creating a responsive website. I added a navigation bar, then a big slider, and below it is the main content of the website. Right now, jQuery (as both the menu background and the main background are black) adds a class to the navigation bar in order to turn it white as soon as you scroll past the slider (which has a height of 550px), so it will be easier to read.

Here's the thing: I want jQuery to add that class depending on the width of the window. If it's less than 600px wide, I want the class to be added automatically. Otherwise, I want jQuery to add it as soon as you scroll past the slider (since I hide it when the window is less than 600px wide). My code is below, and it works just fine if I resize the window and then refresh the page, but I want it to add the class dynamically. Do you think it is possible?

I hope I made myself clear (English is not my first language). Let me know if you need me to explain things better! Thank you in advance. :)

if ($(window).width() > 599 ) {
 $(window).scroll(function() {
 if ($(window).scrollTop() >= 550) { //if you scroll past the slider
 $("#main nav").addClass("white-menu");
 } else {
 $("#main nav").removeClass("white-menu"); //so it turns black again
 }
 });
} else {
 // add it automatically (the slider is hidden):
 $("#main nav").addClass("white-menu");
};

• user2755140: $(window).width() > "599" That's is wrong. You want an integer there. Remove quotes.
• Grumpy: use .resize() api.jquery.com/resize
• Brian: Responsive web designs are usually done with @media tags in css. Not to discourage you if this is just a practice exercise...
• Drake: @DaseinA Whoops! Totally missed that. I fixed it now, thanks!
• Drake: @Grumpy yes, I tried using that but it ended up looking worse. I don't really know how to use it properly.

Answer 1

you can use all the code inside scroll event

$(window).scroll(function() {
 if ($(this).scrollTop() >= 550 && $(this).width() <= 599) { //if you scroll past the slider
 $("#main nav").addClass("white-menu");
 } else {
 $("#main nav").removeClass("white-menu"); //so it turns black again
 }
 });

a similar DEMO

about resize you can use

$(window).on('resize',function() {
 $("#main nav").removeClass("white-menu");
});

on window resize the code will remove the class till user scroll then the scroll event will fire after user scrolling

or instead of all of that you can just use

$(window).on('scroll resize',function() {
 if ($(this).scrollTop() >= 550 && $(this).width() <= 599) { //if you scroll past the slider
 $("#main nav").addClass("white-menu");
 } else {
 $("#main nav").removeClass("white-menu"); //so it turns black again
 }
});

DEMO

• Drake: Hello, thank you very much for your reply. This works perfectly! The only problem I'm having is that, when I resize the window, the menu mantains its color until I scroll. Do you know how can I fix that? Or perhaps it's just a bug of my browser. Edit Oh, I'm an idiot. Of course it won't work until I scroll if it's inside a scroll function. Sorry!
• Mohamed-Yousef: @Drake last update will be helpful .. please take a look at it with last DEMO
• Drake: Thank you so much! That works perfectly. I didn't know you could use 'scroll resize'. :)
• Mohamed-Yousef: @Drake never mind .. I didn't know that too since a short time ago :) :) .. Good Luck :)

Answer 2

.scroll allows you to listen to event, if you only listen when the window is the correct size, this listener won't get triggered if that changes, so I changed it around a bit:

$(window).scroll(function() {
 if ($(window).width() > 599 ) {
 if ($(window).scrollTop() >= 550) { //if you scroll past the slider
 $("#main nav").addClass("white-menu");
 } else {
 $("#main nav").removeClass("white-menu"); //so it turns black again
 }
 }
});

Like Brian mentioned you should use CSS for this other case:

@media (max-width: 600px) {
 #main nav {
 // white-menu styles here
 }
}

For reference the JS way would be:

$(window).resize(function() {
 if ($(window).width() <= 599 ) {
 $("#main nav").addClass("white-menu");
 }
});

It also might be worth thinking about doing a throttle/debounce on these event listeners. They will get called a lot and if your JS starts to do anything more complicated you will see a performance hit. This example uses the underscore library:

var onScroll = function() {
 if ($(window).width() > 599 ) {
 if ($(window).scrollTop() >= 550) { //if you scroll past the slider
 $("#main nav").addClass("white-menu");
 } else {
 $("#main nav").removeClass("white-menu"); //so it turns black again
 }
 }
}
// Don't run until the window has stopped being resized for at least 50ms
var debouncedOnScroll = _.debounce(onScroll, 50);
$(window).scroll(debouncedOnScroll);

See http://underscorejs.org/#debounce

• zfrisch: Just as an additional side note, if you're invested in using JavaScript you can utilize the same functionality as @media using the .matchMedia API and then checking if it's truthy. javascriptkit.com/dhtmltutors/cssmediaqueries4.shtml
• Drake: Thanks for this reply! It was very helpful and I will definitely learn more about underscore when I'm more comfortable using jQuery. :)

Answer 3

Interesting. I used your code in a fiddle and it worked find. As it's state in another answer, the improve of your code will be using the scroll function to wrap all the actions:

$(window).scroll(function() {
 $("#main nav").toggleClass("white-menu", ($(window).scrollTop() >= 550 && $(window).width() <= 599));
});

• Drake: Thanks for taking the time to reply! I tried testing your code but it doesn't work. Perhaps there's something missing?
• user2755140: I don't know in which escenario you used it. It works here: jsfiddle.net/ysqks4wy
• user2755140: Just remember to resize the frame so the code can be applied
• user2755140: There you go. Now you've learnt another method to switch classes in jquery toggleClass which spares you if else blocks to add and remove classes. More effective and fancier :)