到達最后一節時如何隱藏div元素？

Question

我的頁腳有粘性，其中包含一個可單擊的箭頭，可讓我單擊網站上的各個部分，我唯一的問題是到達最后一個部分時它不會消失。 我對jQuery和JS很陌生，不確定如何執行類似的操作。

我已經做過一些研究，但沒有運氣嘗試過：

    document.onscroll = function() {
if (window.innerHeight + window.scrollY > document.body.clientHeight) {
    document.getElementById('arrow').style.display='none';
}
}

這是我剩下的一切：

<div class="scroller animated pulse infinite" id="arrow">
    <i class="ion-md-arrow-dropdown"></i>
</div>

CSS：

.scroller {
    height: 80px;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: transparent;
    box-shadow: 0 2px 2px #ddd;
    z-index: 1;
}

.scroller i {
    color: #fff;
     -webkit-text-stroke: 1px #555;
    font-size: 70px;
    margin: 0 48.5%;
}

JS：

 $(function(){

    var pagePositon = -1,
        sectionsSeclector = '.scrolling_section',
        $scrollItems = $(sectionsSeclector),
        offsetTolorence = 30,
        pageMaxPosition = $scrollItems.length - 1;

    //Map the sections:
    $scrollItems.each(function(index,ele) { $(ele).attr("debog",index).data("pos",index); });

    // Bind to scroll
    $(window).bind('scroll',upPos);

    //Move on click:
    $('#arrow i').click(function(e){
        if ($(this).hasClass('ion-md-arrow-dropdown') && pagePositon+0 <= pageMaxPosition) {
            pagePositon++;
            $('html, body').stop().animate({ 
                  scrollTop: $scrollItems.eq(pagePositon).offset().top - $('nav').height() 
            }, 2000);
        }
    });

    //Update position func:
    function upPos(){
       var fromTop = $(this).scrollTop();
       var $cur = null;
        $scrollItems.each(function(index,ele){
            if ($(ele).offset().top < fromTop + offsetTolorence) $cur = $(ele);
        });
       if ($cur != null && pagePositon != $cur.data('pos')) {
           pagePositon = $cur.data('pos');
       }                   
    }

});

Answer 1

根據我的理解-您首先應該看到頁腳部分可見，如果是-隱藏箭頭，否則-顯示箭頭

為此，此代碼應該可以解決問題

$(window).scroll(function() {
    var top_of_element = $('.footer-nav').offset().top;
    var bottom_of_element = $('.footer-nav').offset().top + $('.footer-nav').outerHeight();
    var bottom_of_screen = $(window).scrollTop() + $(window).innerHeight();
    var top_of_screen = $(window).scrollTop();

    if ((bottom_of_screen > top_of_element) && (top_of_screen < bottom_of_element)){
        $('#arrow').hide();
    } else {
       $('#arrow').show();
    }
});

基於Jquery檢查元素是否在視口中可見