Question

我在向下滚动时尝试移动和淡出div，淡出效果正常，但无法向左移动。

有任何帮助吗？感谢!!!

var moveStart=100 // 100px scroll or less will equiv to 1 opacity
,moveUntil=900 // 900px scroll or more will equiv to 0 opacity
,moving = $('#fading')
;

$(window).bind('scroll', function(){
var moveoffset = $(document).scrollTop(),
    right=0
;
if( moveoffset<=moveStart ){
    right=0;
}else if( moveoffset<=moveUntil ){
    right=500-moveoffset/moveUntil;
}
//    fading.css('opacity',opacity).html(opacity);
fading.css('right',right);
});

Answer 1

所以你需要fade & move左边的元素。
首先需要获得相对于固定值（900）的scrollTop位置的％数量。

要将900转换为100％并检索当前 scrollTop％，您需要以下数学：

currentPercent = Math.ceil( DocScrollTop * 100 / maxValue ); // Current percent (0-100)

所以你的代码应该是这样的：

<强> jsFiddle demo

var max = 900,
    $el = $('#fading');

$(window).on('scroll', function(){
    var scrollPerc = Math.ceil($(this).scrollTop() * 100 / max);
    $el.css({
       opacity : 1-scrollPerc/100, // 1 to 0
       right   : scrollPerc+"%"    // 0% to 100%
    });
});

向下滚动div

1 个答案: