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.
- Include the audio file in audio tag.
- 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>