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

我正在开发一个wordpress主题,它具有通过悬停菜单项来改变背景图像的功能(每个菜单项附加不同的图像).在移动设备上,我想通过滚动更改背景图像,以便观看者无需单击每个菜单来更改背景图像.

这是我通过悬停来改变背景的方法.
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('/');
console.log(URI[2]);

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

通过滚动实现,我想我需要一个将菜单项悬停在其位置的功能,如下图所示.

enter image description here

有没有人有任何想法如何实现这一目标?我一直在探索类似于此的插件或示例代码,但还没有发现任何…
任何建议将不胜感激.

最佳答案
好的,这就是我写的代码.希望能帮助到你.我一直致力于交叉淡化效果,但并不容易.如果有人试过请教我怎么做.

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

        });
    });

});

});

转载注明原文:javascript – 仅通过滚动更改每个菜单项的背景图像 - 代码日志