距离屏幕底部20%时显示div

Question

嘿嘿，

所以我想知道是否可以显示 div 的淡入淡出效果，如果它在当前屏幕视图中距底部 20%。因此，例如，如果您在页面上向下滚动并且以下内容框与屏幕底部的距离为屏幕高度的 20%，则淡入效果运行。

我想要这个是因为有响应功能。我不想每次屏幕尺寸改变时都为淡入淡出效果写一个新的像素高度。

这是我目前使用的代码：

function Scroll(){
var top = document.getElementById('div1');
var ypos = window.pageYOffset;
    if (ypos > 1000){
        top.style.opacity = "1";
    }
    else {
        top.style.opacity = "0";
    }
}
window.addEventListener("scroll",Scroll);

Answer 1

您是否研究过结合位置和高度的滚动？ https://api.jquery.com/scroll/ and https://api.jquery.com/position/ On the scroll you could get the position of the element in question and compare to the window. http://api.jquery.com/height/ and How to get the 'height' of the screen using jquery 这些应该是您需要的所有工具。