Как добавить различные логотипы navbar для каждого «раздела» на веб-сайте на одну страницу во время прокрутки в HTML?

Question

Мне нужно установить разные версии логотипов на разные разделы при прокрутке. Я попытался с помощью javascript установить логотипы с помощью функции прокрутки на разную высоту, но это не работает для разных устройств. Я пытался так, но это не работает для разных размеров экрана. Нужно ли использовать другой подход? Как я могу это сделать?

$(function() {
    $(window).scroll(function(){
        if ($(this).scrollTop()>600) {
            $(".navbar .navbar-brand img").attr("src","img/icons/LOGO-WHITE.png");
        }
        else{
            $(".navbar .navbar-brand img").attr("src","img/icons/LOGO.png");
        }
    })
})

$(function() {
    $(window).scroll(function(){
        if ($(this).scrollTop()>1200) {
            $(".navbar .navbar-brand img").attr("src","img/icons/LOGO-BLACK.png");
        }
        else{
            $(".navbar .navbar-brand img").attr("src","img/icons/LOGO.png");
        }
    })
})

$(function() {
    $(window).scroll(function(){
        if ($(this).scrollTop()>1800) {
            $(".navbar .navbar-brand img").attr("src","img/icons/LOGO-WHITE.png");
        }
        else{
            $(".navbar .navbar-brand img").attr("src","img/icons/LOGO.png");
        }
    })
})

$(function() {
    $(window).scroll(function(){
        if ($(this).scrollTop()>2400) {
            $(".navbar .navbar-brand img").attr("src","img/icons/LOGO-BLACK.png");
        }
        else{
            $(".navbar .navbar-brand img").attr("src","img/icons/LOGO.png");
        }
    })
})