Question

我希望不同的元素在滚动时到达屏幕的中心（屏幕的底部到中间）时淡入，在继续滚动的同时保持放置，然后在它们从屏幕顶部滚动时淡出。

我可以阻止元素滚动某个放置并使用淡入/淡出效果。

我遇到的问题是让元素在停止后再次继续滚动，以及控制不透明度变化的起点和终点。

$(window).scroll(function(){
    $("#theFixed").css("top",Math.max(150,450-$(this).scrollTop()));
});

$(document).ready(function(){
    $(window).scroll(function(){
        $("#theFixed").css("opacity", 0 + $(window).scrollTop() / 1200);
    });
});

<div id="theFixed" style="position:fixed;top:450px;background-color:red" >SOMETHING</div>

STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>

Answer 1

使用ScrollMagic进行此项检查this example。

Java Scroll up淡入，滚动时保持，向上滚动淡出

1 个答案: