I'm currently learning about javascript and jquery, attempting to implement various scripts. I successfully executed the following script:
jQuery(document).ready(function($) {
var scroll_start = 0;
var startchange = $('#homepage-header');
var offset = startchange.offset();
if (startchange.length) {
$(document).scroll(function() {
scroll_start = $(this).scrollTop();
if (scroll_start >= offset.top) {
$("#nav-toggle em").css('background-color', '#ffffff');
}
});
}
});
jQuery(document).ready(function($) {
var scroll_start = 0;
var startchange = $('#cosafacciamo');
var offset = startchange.offset();
if (startchange.length) {
$(document).scroll(function() {
scroll_start = $(this).scrollTop();
if (scroll_start >= offset.top) {
$("#nav-toggle em").css('background-color', '#000000');
}
});
}
});
...and so on for other sections...
Later on, I attempted to simplify the above script into this:
jQuery(document).ready(function($) {
var scroll_start = 0;
var startchange = $('.white');
var offset = startchange.offset();
if (startchange.length) {
$(document).scroll(function() {
scroll_start = $(this).scrollTop();
if (scroll_start > offset.top) {
$("#nav-toggle em").css('background-color', '#ffffff');
}
});
}
});
jQuery(document).ready(function($) {
var scroll_start = 0;
var startchange = $('.dark');
var offset = startchange.offset();
if (startchange.length) {
$(document).scroll(function() {
scroll_start = $(this).scrollTop();
if (scroll_start > offset.top) {
$("#nav-toggle em").css('background-color', '#000000');
}
});
}
});
Although I replaced IDs with classes in the second script, it only works for the first two sections (#homepage-header and #cosafacciamo) and does not change the nav-toggle color anymore.
Why is the first script functioning correctly while the second one isn't? What mistake am I making?
Your assistance would be greatly appreciated! Thank you :)