Show div on scroll down after some height or (px)

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.

Show div on scroll down after some height

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.

  1. Include the audio file in audio tag.
  2. Write a JavaScript function for play and pause for audio with change image ON/OFF.


<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 {
.show {


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

Show div on scroll down, hide on scroll up.

Show div on scroll down after some height. You can customize this code further as per your requirement.

Learn HTML/CSS from W3 School Website