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

Question

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

Answer 1

Может быть точка, чтобы начать с: http://jsfiddle.net/Z47mY/ Здесь вы можете определить цвета на основе позиции прокрутки.

$(document).ready(function() { 
    $(window).scroll(function(event) { 
     var color="#ffffff"; 
     var position = $(window).scrollTop()/$(window).height(); 
     if(position > 0.3) { 
      color="#ff0000"; 
     } 
     if(position > 0.8) { 
      color="#00ff00"; 
     } 
     $("body").css({backgroundColor: color}); 
    }); 
}); 

Answer 2

Вот мое решение: http://jsfiddle.net/2kc44/ или more complete.

Я сначала объявляю массив positions/colors.
Вы можете просто использовать:

var colors = { 
     0: "#FFFFFF", 
    300: "#FF0000", 
    600: "#00FF00", 
    900: "#0000FF" 
} 

или с большим количеством параметров при:

var colors = { 
     0: {c: "#FFFFFF", t: "White" }, 
    300: {c: "#FF0000", t: "Red" }, 
    600: {c: "#00FF00", t: "Green" }, 
    900: {c: "#0000FF", t: "Blue" } 
} 

Этой функция:

$(window).scroll(changeBG); 

function changeBG(e){ 
    var pos = $(window).scrollTop(); 
    for (var c in colors) 
     if(pos >= c) $("body").css({ backgroundColor: colors[c] }); 
} 

Это чистое, и его легко добавить больше цветов, но она могла бы быть более оптимизированным.

Answer 3

Из того, что я понял, я создал скрипку:

http://jsfiddle.net/Zword/6Kkmf/

JQuery:

$(document).ready(function() { 
    $("#colors").scroll(function(event) { 
     $('.clor').each(function(){ 
     var s=$(this).attr('id'); 
     var r=s.substring(1,2); 
     var calc=parseInt(r)-1; 
     if($("#colors").scrollTop()>=($('.clor').height()*calc) && $("#colors").scrollTop()<($('.clor').height()*r)) 
     { 
     var color=$('#'+s).css('backgroundColor'); 
     $("#preview").css({backgroundColor: color}); 
     } 
     }); 
    }); 
});