CODEWITHSUNDEEP
javascriptjquery
Drake
Drake

Reputation: 25

Make jQuery act dynamically depending on the width of the window

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");
};

Upvotes: 2

Views: 140

Answers (3)

Stephen
Stephen

Reputation: 631

.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

Upvotes: 1

Mohamed-Yousef
Mohamed-Yousef

Reputation: 24001

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

Upvotes: 1

user2755140
user2755140

Reputation: 2027

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));
});

Upvotes: 0

Related Questions