javascript - 請教,如何判斷一個元素是否滾動到螢幕視覺區域底部?
给我你的怀抱
给我你的怀抱 2017-05-19 10:26:18
0
3
735

一個元素原來位於螢幕視覺區域底部的上面,當滾動條往上滾動時,這個元素接觸到了螢幕底部,我想在該元素接觸到螢幕底部時觸發一個函數,那麼怎麼才能捕獲到元素接觸到螢幕底部這個情況呢?

给我你的怀抱
给我你的怀抱

全部回覆(3)
小葫芦
<p class="element" style="height: 100px;width:100px; border:1px solid;margin-top:500px"></p>

元素觸底就變紅,否則變白

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

可以透過js得盒子模型取得到目前的scrollTop還有元素的clientTop,再已知盒子高度的情況下進行判斷。

滿天的星座

雷雷

熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!