스크롤로 만 각 메뉴 항목을 참조하는 배경 이미지 변경

Question

나는 떠오르는 메뉴 항목 (각 메뉴 항목이 다른 이미지에 첨부 됨)으로 배경 이미지를 변경하는 기능을 가진 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]); 
}); 

, 난 아래 이미지와 같은 위치로 메뉴 항목을 유혹하는 기능을 필요가 있다고 생각합니다.

사람이 어떻게 이것을 달성하기 위해 어떤 아이디어가 있습니까? 나는 이것과 비슷한 플러그인이나 샘플 코드를 탐색 해왔다.하지만 아무 것도 발견하지 못했다. ... 조언을 주시면 감사하겠습니다.

Answer 1

오케이, 이것이 내가 작성한 코드입니다. 희망이 도움이됩니다. 나는 cross-fading 효과에 대해 연구했지만 그렇게 쉬운 것은 아닙니다. 누군가가 저에게 그것을하는 방법을 가르치시기 바랍니다. 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'); 
      } 

     }); 
    }); 

}); 

});