scroll div hide/show using id/class

Question

I am trying to hide div when scrolling from bottom to top and from top to bottom last it should show div but some issue occurs one way or the other image is look like this-

The method i am using is this:

$(window).scroll(function() {

        if ($(this).scrollTop()>0)
        {
            $("div.nav-down").fadeOut();
        }
        else
        {
            $("div.nav-down").fadeIn();
        }
    });

Answer 1

I was able to do it with the animate function rather than the fadeOut and fadeIn one (it only appears when on the absolute bottom of the page):

 $(window).scroll(function(){ var scrollTop = $(this).scrollTop(); if(scrollTop + $(this).height() == $(document).height() ) { $(".nav-down").stop().animate({ opacity: "1", height: "50px" }); } else { $(".nav-down").stop().animate({ opacity: "0", height: "0px" }); } }); 

 .wrapper { width: 400px; height: 300px; } .nav-down { float: left; width: 400px; height: 50px; background-color: red; } .lorum { float: left; width: 400px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="wrapper"> <div class="lorum">Example text to make it able to scroll up and down: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque augue augue, vestibulum nec convallis vitae, feugiat vel dui. Pellentesque consectetur justo magna. Lorem ipsum dolor sit amet, et auctor ex varius sit amet. Etiam et vulputate nulla. Donec ac leo</div> <div class="nav-down">test</div> <div class="lorum">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque augue augue, vestibulum nec convallis vitae, feugiat vel dui. Pellentesque consectetur justo magna, et auctor ex varius sit amet. Etiam et vulputate nulla. Donec ac leo</div> </div> 

Hope it helps

Answer 2

 let isScrolling = null; const ponyElement = document.querySelector('#pony'); window.addEventListener("scroll", e => { if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) { ponyElement.classList.remove("hide"); }else{ ponyElement.classList.add("hide"); } }); 

 *{ padding: 0em; margin: 0em; } html{ background: skyblue; } #pony{ width: 10em; position: fixed; bottom: -3em; left: 1em; transition: all 0.3s ease; } #pony.hide{ bottom: -100vh; } #long{ height: 100em; } 

 <img id='pony' class='hide' src='https://s-media-cache-ak0.pinimg.com/originals/1c/b7/ca/1cb7caa5fe69d5210407b41b15297ff3.jpg' /> <div id='long'></div> 

If I misunderstanding, please tell me