I have a layout with main divs containing sub divs, each with specific CSS classes that include images. My single-page website has a lot of images, so I want to implement a window scroll effect. After researching on Google, I couldn't find a suitable solution. While the page is scrolling, I need to dynamically remove certain classes using jQuery's removeClass() method. I already have a function set up for the window scroll event, and now I want to delete classes as the page scrolls down.
I'm wondering how to use multiple functions on the window scroll event, bind two or three functions to it, and execute them sequentially.
$(window).scroll(function () {
if ($("#first").offset().top + $("#first").height() < $(document).scrollTop()) {
var obj = $('#first').children('div');
if (obj.hasClass("d")) {
obj.removeClass();
}
obj = obj.children('div');
if (obj.hasClass("c")) {
obj.removeClass();
}
obj = obj.children('div');
if (obj.hasClass("e")) {
obj.removeClass();
}
} else {
var obj = $('#first').children('div');
if (obj.hasClass("d") == false) {
obj.addClass("d");
}
obj = obj.children('div');
if (obj.hasClass("c") == false) {
obj.addClass("c");
}
obj = obj.children('div');
if (obj.hasClass("e") == false) {
obj.addClass("e");
}
}
<div id="firstMain">
<div class"a"> </div>
<div class"b"> </div>
<div class"c"> </div>
</div>
<div id="Second"></div>
<div id="Z"></div>