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

Question

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

});

I'm struggling to get a fiddle to display my code. Basically I'm just looking for my arrow icon to disappear when the last section element of my page has been reached. — Caitlin, Apr 01 '19 at 08:41
you want it to disappear when the last section element of my page has been reached i.e - when it's visible? also - does this section have an id or a specific class? — Roysh, Apr 01 '19 at 08:43
Yes exactly. I would like it to disappear when it reaches the footer element. — Caitlin, Apr 01 '19 at 08:48
@godfather : No, as the code I had targeted the ID, can you explain that a little more? — Caitlin, Apr 01 '19 at 08:57

Roysh · Accepted Answer · 2019-04-01T09:09:55.687

1

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

edited Apr 01 '19 at 09:09

answered Apr 01 '19 at 09:04

Roysh

1,493
3
16
24

Can I ask how this knows how to remove the arrow element? – Caitlin Apr 01 '19 at 09:09
Oh sorry, totally missed the arrow part there, my bad! – Caitlin Apr 01 '19 at 09:10
first, I have edited my answer. I had some typeos. How does it work - the scroll function listens to all scrolling events on the window. when it calculates that the section is visible it does hide() the the arrow element while showing it when the section isn't visible – Roysh Apr 01 '19 at 09:11
1

Great, this works perfectly! Thanks for the help and explanations! – Caitlin Apr 01 '19 at 09:12
Could I ask, is there a property I could add to this to make it fade out? Right now it just disappears suddenly. I'm thinking I would add a CSS element but not sure where that should go? – Caitlin Apr 01 '19 at 10:44
you can use jQuery `fadeOut()` and `fadeIn()` instead of `.show()` and `.hide()`. read more about that here http://api.jquery.com/fadeout/ – Roysh Apr 01 '19 at 10:46
Perfect, looks so much better. I appreciate the article as well. – Caitlin Apr 01 '19 at 10:48

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

1 Answers1