通过 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 位置进行比较。视觉效果这里就不多说了，留着做Demo用。这很令人困惑，所以如果你需要它在 #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>

通过 div 而不是页面顶部时如何启动 jquery 计数？

How to initiate jquery count when passing div instead of top of page?

jquery

html

text

opacity

parallax