Как изменить цвет div при прокрутке градиента?

Question

У меня есть изображение, которое имеет много цветов градиента. Он прокручивается на странице. Поэтому, когда цвет изображения останавливается в центре страницы, изменяется значение цвета эскиза. Как это сделать?

Я не уверен, поэтому я отправляю jsfiddle только с html и css.

JSFIDDLE

//code 
#colors{ 

    width:123px; 
    height:1360px ; 
    background-image:url('http://s26.postimg.org/p4x2on37t/bgimage.jpg'); 
} 

Answer 1

Что-то подобное должно получить цвет и установить его на эскизе, как вы прокручивать

var bg = $('#colors').css('background-image').replace(/(url\(|\)|\")/g,''); 
var img = new Image(); 
img.onload = function() { 
    console.log('loaded') 
    var canvas = $('<canvas />').get(0); 
    canvas.width = img.width; 
    canvas.height = img.height; 
    var ctx = canvas.getContext('2d'); 
    ctx.drawImage(img, 0, 0, img.width, img.height); 

    $('#wrapper').on('scroll', function() { 
     console.log('test') 
     var top  = $(this).scrollTop(); 
     var height = $(this).outerHeight(); 
     var x   = (height/2) + top; 
     var pixelData = canvas.getContext('2d').getImageData(10, x, 1, 1).data; 
     console.log(pixelData) 

     $('#preview').css('background', 'rgb('+pixelData[0]+', '+pixelData[1]+', '+pixelData[2]+')') 
    }).trigger('scroll'); 
} 
img.src = bg; 
if (img.complete) img.onload(); 

FIDDLE