滚动:在页面上的特定位置更改div的不透明度(从0到1和vv)
滚动:在页面上的特定位置更改div的不透明度(从0到1和vv)
提问于 2017-07-13 03:30:18
在张贴这个问题之前，我已经搜索了可能的答案，但找不到我需要的。
也就是说:我有一个带有多个div的演示页面，每个div可以有不同的高度。我已经坚持了几个小时的方法是这样做的：
当div的底部在向下滚动时达到特定的页面顶部偏移阈值时，向上滚动时不透明度应更改为.4，并且div再次垂直居中，然后将不透明度设置为1。
期望的结果是1个div是活动的(100%不透明度)，垂直居中，所有其他div都是不活动的，但是当你向上/向下滚动足够多的时候，活动的div应该变成不活动的(不透明度为40%)，下一个/上一个div应该变成活动的。
需要注意的是，偏移量应该基于div底部的位置来计算。因为如果不这样做，高度较大的div可能会在滚动时处于非活动状态。从底部位置开始计算应该确保整个div偏离中心足够使其处于非活动状态。
检查这个小提琴：https://jsfiddle.net/4q98yxk2/3/
代码：
<script
src="https://code.jquery.com/jquery-2.2.4.js"
integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI="
crossorigin="anonymous"></script>
<script type="text/javascript">
$(window).on("load",function() {
$(window).scroll(function() {
$(".fade").each(function() {
console.log($(this).position().top);
});
}).scroll(); //invoke scroll-handler on page-load
});
</script>
</head>
<body>
<div class="content">
<div class="fade">Box 1</div>
<div class="fade">Box 2</div>
<div class="fade biggest">Box 3</div>
<div class="fade">Box 4</div>
<div class="fade blue">Box 5 blue</div>
<div class="fade big">Box 6</div>
<div class="fade">Box 7</div>
<div class="fade">Box 8</div>
<div class="fade big">Box 9</div>
<div class="fade biggest">Box 10</div>
<div class="fade">Box 11</div>
<div class="fade">Box 12</div>
</div>希望你能帮忙，因为我对如何实现这一点一无所知。谢谢!
Stack Overflow用户
发布于 2017-07-13 05:00:29
我不太了解JS，但我想我找到了一些东西。如果有帮助，请检查小提琴：
https://jsfiddle.net/scorpio777/4q98yxk2/25/
我已经用这个替换了你的JS：
var fade = $('.fade');
var range = 200;
$(window).on('scroll', function () {
var st = $(this).scrollTop();
fade.each(function () {
var offset = $(this).offset().top;
var height = $(this).outerHeight();
offset = offset + height / 1;
$(this).css({ 'opacity': 1 - (st - offset + range) / range });
});
});并添加了CSS：
.content{
margin-top:50px;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/45066085
复制相关文章
相似问题
腾讯云开发者
