CODEWITHSUNDEEP
javascripthtmlcss
Caitlin
Caitlin

Reputation: 531

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

});

Upvotes: 0

Views: 615

Answers (1)

Roysh
Roysh

Reputation: 1550

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

Upvotes: 1

Related Questions