Show div on scroll down after some height

Show a div when scroll down after some height from the top of the page. On mouse scroll down show a hidden div and hide div when mouse scroll up.

Using the jQuery scroll () function to find the scroll position and show/hide DIV on mouse scroll up or down. Show some particular div on page after scrolling 100px, 500px or end of the page bottom. Showing/Hiding particular div Based on Position.

Demo

  1. Include the audio file in audio tag.
  2. Write a javascript function for play and pause for audio with change image ON/OFF.
  • Html
  • Css
  • JavaScript
<div id="advertisement" class="advertisement hide">Show div on scroll down after 100px</div>

body {
    height: 1600px;
}
.advertisement {
    position: fixed;
    bottom: 0;
    padding: 50px 30px;
    background: #433eff;
    z-index: 1;
    transition: all 1s;
}
.hide {
    opacity:0;
    left:-100%;
}
.show {
    opacity:1;
    left:0;
}

<script>
    $(document).scroll(function() {

        myID = document.getElementById("advertisement");

        var myScrollFunc = function () {
            var y = window.scrollY;
            if (y >= 100) {
                myID.className = "advertisement show"
            } else {
                myID.className = "advertisement hide"
            }
        };

        window.addEventListener("scroll", myScrollFunc);
    });
</script>

Show div on scroll down, hide on scroll up