Javascript 当到达最后一节时，如何隐藏div元素？

我有一个粘性的页脚，其中包含一个可点击的箭头，让我点击我的网站上的部分，我唯一的问题是，它不会消失时，最后一节已经到达。我对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>

JS:

---

根据我的理解-你应该首先看到页脚部分是可见的，如果是这样-隐藏箭头，否则-显示箭头

为此，这段代码应该可以做到这一点

$(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();
    }
});

---

基于

无论如何，你可以发布一个提琴，并且更具体一点？我正在努力获得一个提琴来显示我的代码。基本上，我只是想在我的页面的最后一个部分元素到达时，我的箭头图标消失。你想在我的页面的最后一个部分元素到达时，即-当它可见时，它消失吗？此外-此部分是否有id或特定类？是的，完全正确。我希望它在到达页脚元素时消失。这个元素是div吗？它有什么类或id？我能问一下这个如何知道如何删除箭头元素吗？哦，对不起，完全错过了箭头部分，我的坏！首先，我编辑了我的答案。我有一些打字机。它是如何工作的-scroll函数监听窗口上的所有滚动事件。当它计算出该部分是可见的时，它确实隐藏了箭头元素，而在该部分不可见时显示它。很好，这非常有效！谢谢你的帮助和解释！我可以问一下，有没有一个属性我可以添加到这使它淡出？现在它突然消失了。我想我会添加一个CSS元素，但不确定该添加到哪里？

 $(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');
       }                   
    }

});

$(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();
    }
});