javascript - Bagaimana untuk menentukan sama ada elemen telah menatal ke bahagian bawah kawasan yang kelihatan pada skrin?

Question

Satu elemen pada asalnya terletak di bahagian bawah bahagian bawah skrin yang kelihatan Apabila bar skrol menatal ke atas, elemen ini menyentuh bahagian bawah skrin . Jadi bagaimana saya boleh menangkap apabila elemen menyentuh bahagian bawah skrin?

Answer 1

<p class="element" style="height: 100px;width:100px; border:1px solid;margin-top:500px"></p>

Elemen menjadi merah apabila ia menyentuh bahagian bawah, jika tidak ia menjadi putih

    <script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
    <script>
        var element = $('.element');
        var win = $(window);
        win.scroll(function() {
            if (element.offset().top + element.height() <= win.height() + win.scrollTop()) {
                element.css('backgroundColor', '#f33');
            } else {
                element.css('backgroundColor', '#fff');
            }
        })
    </script>

Answer 2

Anda boleh mendapatkan skrolTop semasa dan klienTop elemen melalui model kotak js, dan kemudian membuat pertimbangan apabila ketinggian kotak diketahui.

Answer 3

document.addEventListener('scroll', function () {
    var p = document.getElementById('p')
    if (document.body.scrollTop === p.offsetTop) {
        //...
    }
})