如何在传递div而不是页面顶部时启动jquery计数？

Question

[我试图弄清楚如何通过下面的脚本在传递周围的容器#box时开始计算不透明度，而不是在页面的顶部开始计算不透明度。

有人知道吗？

脚本：

function parallaxFade() {
    scrollPos = $(this).scrollTop();
    $('#boxtext').css({
        'opacity': 1-(scrollPos/100)
    });
}

HTML：

<div class="box" id="box">
    <h3 class="boxtext" id="boxtext">Heading</h3>
</div>

Answer 1

我们可以将滚动位置（此处为ScrollPos）与使用jQuery position()获得的#box位置进行比较。视觉效果在这里不会被提及，因此我将其保留为演示目的。这很令人困惑，因此，如果您需要在#box容器之后严格更改不透明度，可以将条件更改为：

if (scrollPos > pos+$('#box').height()) {

function parallaxFade(pos) {
    var  opa = $('#boxtext').css('opacity');
    scrollPos = $(this).scrollTop();
    if (scrollPos > pos) {
    $('#boxtext').css({
        'opacity': 1-(scrollPos/(100+pos))
    });
    } else{
    
    $('#boxtext').css({
        'opacity': 1-(1/(100+scrollPos))
    });
    }
    //console.log(opa);
}
$(document).scroll(function() {
var pos = $('#box').position().top;
parallaxFade(pos);
});

.box{
width:200px;
height:200px;
background-color:red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="ipsum">
<p>Lorem Ipsum Lorem IpsumLorem Ipsum</p>
<p>Lorem Ipsum Lorem IpsumLorem Ipsum</p>
<p>Lorem Ipsum Lorem IpsumLorem Ipsum</p>
<p>Lorem Ipsum Lorem IpsumLorem Ipsum</p>
<p>Lorem Ipsum Lorem IpsumLorem Ipsum</p>
<p>Lorem Ipsum Lorem IpsumLorem Ipsum</p>
<p>Lorem Ipsum Lorem IpsumLorem Ipsum</p>
<p>Lorem Ipsum Lorem IpsumLorem Ipsum</p>
<p>Lorem Ipsum Lorem IpsumLorem Ipsum</p>
<p>Lorem Ipsum Lorem IpsumLorem Ipsum</p>
<div class="box" id="box">
    <h3 class="boxtext" id="boxtext">Heading</h3>
</div>
<p>Lorem Ipsum Lorem IpsumLorem Ipsum</p>
<p>Lorem Ipsum Lorem IpsumLorem Ipsum</p>
<p>Lorem Ipsum Lorem IpsumLorem Ipsum</p>
<p>Lorem Ipsum Lorem IpsumLorem Ipsum</p>    <p>Lorem Ipsum Lorem IpsumLorem Ipsum</p>
<p>Lorem Ipsum Lorem IpsumLorem Ipsum</p>
<p>Lorem Ipsum Lorem IpsumLorem Ipsum</p>
<p>Lorem Ipsum Lorem IpsumLorem Ipsum</p>    <p>Lorem Ipsum Lorem IpsumLorem Ipsum</p>
<p>Lorem Ipsum Lorem IpsumLorem Ipsum</p>
<p>Lorem Ipsum Lorem IpsumLorem Ipsum</p>
<p>Lorem Ipsum Lorem IpsumLorem Ipsum</p>

</div>