I have multiple instances of (window).scroll function that are problematic at times. Is there a way I can separate them so that these do not conflict with each other?
First instance that appears on every page:
$(window).scroll(function(){
if ($(this).scrollTop() > 50) {
$('.gotop').addClass('gotop-visible');
} else {
$('.gotop').removeClass('gotop-visible');
}
});
The second instance only appears on one page but is repeated several times for various classes while the first instance is also present:
$(window).scroll(function(){
var light_pos = $('.dark main').offset().top;
var light_height = $('.dark main').height();
var menu_pos = $('.top-left h1').offset().top;
var menu_height = $('.top-left h1').height();
if(menu_pos > light_pos && menu_pos < (light_pos + light_height)) {
$('.top-left h1').addClass('menu_black');
$('.top-left h1').removeClass('menu_white');
}
else {
$('.top-left h1').removeClass('menu_black');
$('.top-left h1').addClass('menu_white');
}
})
Is there a way these functions can be separated clearly?