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>