javascript - 请教，如何判断一个元素是否滚动到屏幕可视区域底部？

问题描述

问 题

一个元素原来位于屏幕可视区域底部的上面，当滚动条往上滚动时，这个元素接触到了屏幕底部，我想在该元素接触到屏幕底部时触发一个函数，那么怎么才能捕获到元素接触到屏幕底部这个情况呢？

解决方案

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

元素触底就变红，否则变白色

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

这篇关于javascript - 请教，如何判断一个元素是否滚动到屏幕可视区域底部？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！