html - 大小取决于滚动
问题描述
我想知道如何使元素不透明度取决于页面的滚动位置。例如,如果我的元素位于页面中间,那么随着用户滚动到中间,该元素会变得越来越不透明。
谢谢!
解决方案
您可以使用以下代码,其中 ref1 和 ref2 是窗口坐标中元素变得完全不透明的顶部和底部位置,而 fadeSize 是使元素完全不可见所需的滚动量。代码自动处理所有带有“ScrollFade”类的元素:
$(function() {
document.addEventListener('scroll', function(e) {
var ref1 = $(window).height() * 0.4;
var ref2 = $(window).height() * 0.6;
var fadeSize = 100;
$('.ScrollFade').each(function() {
var $elem = $(this);
var h = $elem.height();
var top = $elem.offset().top - window.scrollY;
var bottom = top + h;
var opacity;
if (top < ref1 && bottom > ref2 || ref1 < top && top < ref2 || ref1 < bottom && bottom < ref2) {
opacity = 1;
} else if (top > ref2) {
opacity = 1 - (top - ref2) / fadeSize;
} else if (bottom < ref1) {
opacity = 1 - (ref1 - bottom) / fadeSize;
}
opacity = Math.min(Math.max(0, opacity), 1);
$elem.css('opacity', opacity);
});
});
});
body {
height: 50cm;
position: relative;
}
#myElem {
position: absolute;
top: 20cm;
height: 3cm;
width: 5cm;
background-color: red;
color: white;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="myElem" class="ScrollFade">Lorem ipsum</div>
推荐阅读
- c++ - 在 C++ 中,如何使用向量调用派生类?
- java - 侦听器不适用于 java 中的 firebase 数据引用
- android - 在 Flutter 的 Web 视图中仅禁用触摸输入
- excel - ShellExecute可以发送类似于Vba中Shell的命令吗
- ssl - gevent SSL with godaddy error: ssl.SSLError: [SSL: SSLV3_ALERT_CERTIFICATE_UNKNOWN] sslv3 alert certificate unknown (_ssl.c:1051)
- android - flutter:应用关闭时通过接收短信弹出通知
- swift - SwiftUI - 隐藏 ScrollView 的指示器使其停止滚动
- javascript - 处理redux中jsx元素的点击事件
- asp.net - 无法从 Windows Docker 容器连接到 Azure 托管的 SQL 数据库
- git - 可以使用 git reset --hard 而不是 git pull 在生产环境中部署代码吗?