简体   繁体   中英

How to hide a div element when the last section has been reached?

I have an sticky footer which contains a clickable arrow that lets me click through the sections on my website, my only issue is that it does not disappear when the last section has been reached. I'm quite new to jQuery and JS and not sure how to execute something like this.

I've done some research and tried this with no luck:

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

Here is the rest of what I have:

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

});

According to what I understand - you should first see iכ the footer section is visible and if so - hide the arrow, else - show the arrow

For that, this code should do the trick

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

based on Jquery check if element is visible in viewport

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM