Wechselndes Hintergrundbild bezogen auf jeden Menüpunkt nur durch Scrollen

Ich entwickle ein WordPress-Thema, das eine Funktion zum Ändern des Hintergrundbilds hat, indem ich über den Menüpunkt schwebe (jeder Menüpunkt ist mit einem anderen Bild verbunden). Auf Mobilgeräten möchte ich das Hintergrundbild einfach durch Scrollen ändern, damit die Zuschauer nicht auf jedes Menü klicken müssen, um das Hintergrundbild zu ändern.

Dies ist die Methode, die ich implementiert habe, um den Hintergrund durch Bewegen der Maus zu ändern.
http://codepen.io/nummelin/pen/kzaso

// When any of the a's inside of sidebarContainer are hovered
$( ".sidebarContainer a" ).hover(function() {

// Removes all previous classes but keeps sidebar1
$('.sidebar1').removeClass().addClass('sidebar1');

// Splits up the URL on the current href
var URI = $(this).attr('href').split("https://stackoverflow.com/");
console.log(URI[2]);

// Applies the last part of the URL to sidebar1 
$('.sidebar1').addClass(URI[2]);
});

Um das Scrollen zu erreichen, brauche ich eine Funktion, die den Menüpunkt durch seine Position wie das Bild unten bewegt.

Hat jemand eine Idee, wie man das erreichen kann? Ich habe ein ähnliches Plugin oder Beispielcode untersucht, aber keine gefunden … Alle Ratschläge wären willkommen.

Okay, das ist also der Code, den ich geschrieben habe. Ich hoffe es hilft. Ich habe an Überblendeffekten gearbeitet, aber das war nicht so einfach. Wenn jemand es versucht hat, lehren Sie mich bitte, wie es geht.

Demo auf Codepen:
http://codepen.io/bavavava/pen/rrNpaY

jQuery(function($){
  'use strict';

$(document).ready(function(){

    var elem = $('li.list-item'),
        $listPosition = $.map(elem, function(el, i) { return $(el).offset().top; }),
        $listURL = $.map(elem, function(el,i) { return $(el).find('a').attr('href'); }),
        $bg = $('.container');
        console.log($listPosition);
        console.log($listURL);

    //PRELOAD IMAGES
    $.fn.preload = function() {
        this.each(function(){
            $('<img/>')[0].src = this;
        });
    }

    $($listURL).preload();

    //SCROLL CHANGE
    $(window).on('scroll', function () {
        var windowScroll = $(this).scrollTop();

        $.each($listPosition, function (i, pos) {

            if (windowScroll >= pos) {
                $bg.css('background', 'url(' + $listURL[i] + '), black no-repeat center center fixed');
            }

        });
    });

});

});