Question

在发布此问题之前，我已经搜索了可能的答案，但找不到我需要的内容。

那说：我有一个带有多个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>

希望你能提供帮助，因为我对如何实现这一目标一无所知。谢谢！

Answer 1

我不太了解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;
}

滚动：在页面上的特定位置更改div的不透明度（从0到1和vv）

1 个答案: