スクロールだけで各メニュー項目を参照する背景画像を変更する

Question

私は、メニュー項目をホバリングすることによって背景画像を変更する機能を持つワードプレステーマを開発しています（それぞれのメニュー項目は異なる画像に添付されています）。モバイルでは、背景画像を変更するために各メニューをクリックする必要がないように、スクロールだけで背景画像を変更したいと考えています。

これは、私がホバリングによって背景を変更するために実装した方法です。スクロールを実現 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]); 
}); 

、私は下の画像のようにその位置によってメニュー項目をホバリングという機能が必要だと思います。

誰もがこれを達成するためにどのように任意のアイデアを持っていますか？私はこれに似たプラグインやサンプルコードを探ってきましたが、見つかっていませんでした... アドバイスをいただければ幸いです。

Answer 1

これは私が書いたコードです。それが役に立てば幸い。私はクロスフェーディング効果に取り組んだが、それは容易ではなかった。もし誰かが私にそれをやる方法を教えてください。 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'); 
      } 

     }); 
    }); 

}); 

});