javascript - Java 向上滚动淡入、滚动时保持、向上滚动淡出

标签 javascript jquery css

我希望不同的元素在滚动时到达屏幕中心(屏幕底部到中间)时淡入,在继续滚动时保持原样,然后在滚动离开屏幕顶部时淡出。

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

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

$(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/

相关文章:

javascript - 图片库集成到网页中

javascript - -Infinity 是如何工作的?

javascript - Node ffi 指向结构体的指针

javascript - 如何检测 DOM 元素是否部分超出视口(viewport)

php - 防止在拖动时显示图像

html - 使div(height)占据父级剩余高度

javascript - jQuery 侧边栏会切换,但不会向后滑动

javascript - 如何给已有的js代码添加淡入淡出效果

html - Outlook.com 如何为标题文本加下划线?

javascript - 在 Ember 中如何使用 View 更改 css 属性然后查看它?