Изменение идентификаторов для классов разбивает мой код

Question

Я не очень хорошо с Javascript и JQuery, но пытается изучить и сделать работу несколько сценариев :) У меня есть этот сценарий работы:

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'); 
     } 
    }); 
    } 
}); 
jQuery(document).ready(function($) { 
    var scroll_start = 0; 
    var startchange = $('#successo'); 
    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 = $('#blog'); 
    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'); 
     } 
    }); 
    } 
}); 
jQuery(document).ready(function($) { 
    var scroll_start = 0; 
    var startchange = $('#contatti'); 
    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 = $('.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'); 
     } 
    }); 
    } 
}); 

Очевидно я поставил .white и .dark классы, где находятся идентификаторы, но этот второй сценарий работает только в течение первых двух блоков (# домашней страницы-заголовок и #cosafacciamo), а затем нав-тумблер Безразлично Больше не меняйте цвет.

Почему первый скрипт работает правильно, а не второй? Что я делаю неправильно?

Пожалуйста, помогите! Спасибо;)

Answer 1

Когда вы установили var startchange = $('.white'), этот объект jQuery $('.white') содержит несколько элементов DOM, но метод .offset() возвращает только числа для первого.

Чтобы решить эту проблему, используйте .each() для прокрутки каждого элемента DOM.

Вы также можете использовать функции JavaScript, чтобы сохранить код DRY. Попробуйте что-то вроде этого (непроверенные):

function doMyThing(startchange,color) { 
    var scroll_start = 0; 
    if (startchange.length) { 
    startchange.each(function() { 
     var offset = $(this).offset(); 
     $(document).scroll(function() { 
     scroll_start = $(this).scrollTop(); 
     if (scroll_start >= offset.top) { 
      $("#nav-toggle em").css('background-color', color); 
     } 
     }); // scroll 
    } // if 
    } // doMyThing 
}); 

jQuery(document).ready(function($) { 
    doMyThing($('.white'),'#ffffff'); 
    doMyThing($('.black'),'#000000'); 
});