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

Question

Before posting this question I've searched for possible answers but couldn't find what I need. 发布此问题之前，我已经搜索了可能的答案，但是找不到我需要的东西。

That said: I have a demo page with multiple divs and every div can have a different height. 就是说：我有一个包含多个div的演示页面，每个div可以具有不同的高度。 What I've been stuck on for hours is a way to do the following: 我已经坚持了几个小时的方法是执行以下操作：

When the bottom of a div meets a specific page top offset threshold while scrolling down, the opacity should change to .4 When scrolling up and the div is vertically in center again, then turn the opacity to 1. 当div的底部在向下滚动时达到特定页面顶部偏移阈值时，不透明度应更改为.4。向上滚动时div再次垂直居中，然后将不透明度设置为1。

The desired result is that 1 div is active (100% opacity), vertically in center and all the other divs inactive but when you scroll up/down enough the active div should become inactive (opacity 40%) and the next/previous div should become active. 理想的结果是1个div处于活动状态（不透明度为100％），垂直居中，其他所有div都不活动，但是当您向上/向下滚动足够多时，该活动div应该不活动（不透明度40％），而下一个/上一个div应该变得活跃。

It's imporant to note that the offset should be calculated based on the position of the bottom of the div. 重要的是要注意，偏移量应基于div底部的位置来计算。 Because otherwise a div with a large height might get inactive when scrolling. 因为否则滚动时高高度的div可能会变得不活动。 Calculating from the bottom position should make sure that the entire div is out of center enough to become inactive. 从底部位置进行计算应确保整个div偏离中心足够大，以使其变为非活动状态。

Check this fiddle: https://jsfiddle.net/4q98yxk2/3/ 检查这个小提琴： https : //jsfiddle.net/4q98yxk2/3/

Code: 码：

    <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>

Hope you can help because I've got no clue on how to achieve this. 希望您能有所帮助，因为我对如何实现这一目标一无所知。 Thanks! 谢谢！

Answer 1

I don't know much JS, but I think I found something. 我不太了解JS，但我想我发现了一些东西。 Please check the fiddle if it helps: 请检查小提琴是否有帮助：

https://jsfiddle.net/scorpio777/4q98yxk2/25/ https://jsfiddle.net/scorpio777/4q98yxk2/25/

I've replaced your JS with this: 我已经用以下代码替换了您的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 });
    });
});

and added CSS: 并添加了CSS：

.content{
  margin-top:50px;
}

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

问题描述

1 个解决方案

解决方案1
1 2017-07-12 21:00:29

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

问题描述

1 个解决方案

解决方案1 1 2017-07-12 21:00:29

解决方案1
1 2017-07-12 21:00:29