Question

我有用于在用户向下滚动页面时更改背景颜色的代码。

前两个div的背景颜色会发生变化。如何调用该函数再次运行，以便第三个div背景颜色变为开始颜色？

    function call(){
        $(document).scroll(function() {
        scroll_pos = $(this).scrollTop(); 
        if(scroll_pos >= animation_begin_pos && scroll_pos <= animation_end_pos ) { 
            var percentScrolled = scroll_pos / ( animation_end_pos - animation_begin_pos );
            var newRed = beginning_color.red() + ( ( ending_color.red() - beginning_color.red() ) * percentScrolled );
            var newGreen = beginning_color.green() + ( ( ending_color.green() - beginning_color.green() ) * percentScrolled );
            var newBlue = beginning_color.blue() + ( ( ending_color.blue() - beginning_color.blue() ) * percentScrolled );
            var newColor = new $.Color( newRed, newGreen, newBlue );
            //console.log( newColor.red(), newColor.green(), newColor.blue() );
            $('body').animate({ backgroundColor: newColor }, 0);
        } else if ( scroll_pos > animation_end_pos ) {
             $('body').animate({ backgroundColor: ending_color }, 0);
        } else if ( scroll_pos < animation_begin_pos ) {
             $('body').animate({ backgroundColor: beginning_color }, 0);

        } else { }
    });
 }

Answer 1

请参阅：http://jsfiddle.net/Khursheed_Ali/Phb4B/26 /

代码：

function call(){
     var offset=0;
    $(document).scroll(function() {
    scroll_pos = $(this).scrollTop(); 
    if(scroll_pos >= animation_begin_pos && scroll_pos <= animation_end_pos ) { 
       // console.log( 'scrolling and animating' );
        //we want to calculate the relevant transitional rgb value
        var percentScrolled = (scroll_pos-offset) / ( animation_end_pos - animation_begin_pos );
        var newRed = beginning_color.red() + ( ( ending_color.red() - beginning_color.red() ) * percentScrolled );
        var newGreen = beginning_color.green() + ( ( ending_color.green() - beginning_color.green() ) * percentScrolled );
        var newBlue = beginning_color.blue() + ( ( ending_color.blue() - beginning_color.blue() ) * percentScrolled );
        var newColor = new $.Color( newRed, newGreen, newBlue );
        //console.log( newColor.red(), newColor.green(), newColor.blue() );
        $('body').animate({ backgroundColor: newColor }, 0);
    } else if ( scroll_pos > animation_end_pos ) {
         $('body').animate({ backgroundColor: ending_color }, 0);
    } else if ( scroll_pos < animation_begin_pos ) {
         $('body').animate({ backgroundColor: beginning_color }, 0);

    } else { }
     // added   
    if(scroll_pos > animation_end_pos){
        offset+=blocks *2;
        animation_begin_pos=animation_end_pos; animation_end_pos+=blocks *2;
        $('body').animate({ backgroundColor: beginning_color }, 0);


    }

     if(scroll_pos<offset){
        console.log("offset:"+offset)
        offset-=blocks *2;
        animation_end_pos-=blocks *2; animation_begin_pos-=blocks *2; 
    }      
});

Answer 2

这是你可能想要的。 JsFiddle Link

我刚换了一行。

    var animation_end_pos = blocks + blocks;

到

    var animation_end_pos = blocks * $('.block').length;

动画应该在最后一个块而不是第二个块结束，所以我计算了总高度（所有块的高度之和。这里假设所有块的高度都相同。）

    var blocks = $(".block").height();
    ...
    var animation_end_pos = blocks * $('.block').length;

为了获得更好的效果，我在页面加载时将body的背景颜色设置为开始颜色。

    $("body").css("background-color", beginning_color);

Answer 3

我刚换了一行。

var animation_end_pos = blocks + blocks;

到

var animation_end_pos = blocks * $('.block').length;

动画应该在最后一个块而不是第二个块结束，所以我计算了总高度（所有块的高度之和。这里假设所有块的高度都相同。）

var blocks = $(".block").height();
...
var animation_end_pos = blocks * $('.block').

滚动时如何更改背景颜色并重复此过程？

3 个答案: