Javascript 仅通过滚动更改每个菜单项的背景图像

我正在开发一个wordpress主题，它可以通过悬停菜单项来改变背景图像（每个菜单项都附加了不同的图像）。在手机上，我想通过滚动来改变背景图像，这样观众就不需要点击每个菜单来改变背景图像

这是我实现的通过悬停改变背景的方法。

实现滚动，我想我需要一个功能，悬停菜单项的位置，如下图所示

有人知道如何做到这一点吗？我一直在探索类似的插件或示例代码，但没有发现任何。。。

---

任何建议都将不胜感激。

好的，这就是我写的代码。希望能有帮助。我曾经研究过交叉褪色效果，但没那么容易。如果有人试过，请教我怎么做

Codepen上的演示：

jQuery（函数（$）{
"严格使用",；
$（文档）.ready（函数（）{
var elem=$（'li.list item'），
$listPosition=$.map（elem，函数（el，i）{return$（el.offset（）.top；}），
$listURL=$.map（元素，函数（el，i）{return$（el）.find（'a'）.attr（'href'）；}），
$bg=$（“.container”）；
console.log（$listPosition）；
log（$listURL）；
//预加载图像
$.fn.preload=函数（）{
这个。每个（函数（）{
$（'=pos）{
$bg.css（'background'，'url（'+$listURL[i]+'），黑色不重复中心固定）；
}
});
});
});
});

您是否已经尝试了Croll活动？谢谢您的评论！不，还没有。我对Jquery也很陌生。。。似乎.scrollTop（）可以解决这个问题！我要试试看！是的，你应该。只需创建一个函数，它将获得菜单项顶部的偏移量。这样，就不会重复代码。

// 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('/');
console.log(URI[2]);

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

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');
            }

        });
    });

});

});