我希望不同的元素在滚动时到达屏幕中心(屏幕底部到中间)时淡入,在继续滚动时保持原样,然后在滚动离开屏幕顶部时淡出。
我可以在某个位置停止元素滚动并使用淡入/淡出效果。
我遇到的问题是让元素在停止后再次继续滚动,以及控制不透明度变化的起点和终点。
$(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>
最佳答案
使用 ScrollMagic,检查 this example .
关于javascript - Java 向上滚动淡入、滚动时保持、向上滚动淡出,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47477633/