Last Updated on August 9, 2022 by Roshan Parihar
In this tutorial, learn how to show hide image on scroll down or up in jQuery. The short answer is to use the scrollTop() function along with the show() and hide() function.
Show image when scrolling down the screen or hide image when scrolling up the screen in jQuery. Scrolling the screen to the top or to the bottom with show/hide effect attract visitors.
Initially, the image is in a visible state and hides only when scrolling down. Again if the visitor takes the screen to the top position, the images display again.
Show Hide Image on Scroll Down or Up Using jQuery
To show hide image on scroll down, you have to use scrollTop() function to give the position from the top. It checks the scroll event of jQuery with the specified position. After that, use the show() and hide() function of jQuery to show hide image on scroll.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<script> $(window).scroll(function() { if ($(this).scrollTop()>1200){ $('.myimgDiv').hide(1000); } else{ $('.myimgDiv').show(1000); } }); </script> <div class="myimgDiv"> <img src="/images/user1.jpg" alt="Manager"/> </div> |
Output
The above example contains the image without any button. You need to use the scropTop() function to check the length of scrolling the screen. The example first hides the image on the scroll to the bottom. After that, it displays the image when scrolling to the top.
The scrolling effect is somehow useful when you want to display content for some area of the screen only. You can change the image size and the scroll length as per your requirement.
The jQuery show/hide function also contains the fade effect which is 1 second in the above example. However, you can also change this or increase it to some extent.
You May Also Like to Read.
- How to Show Hide Div On Scroll using jQuery.
- jQuery Show/Hide Function
- How to Smooth Scroll to Top of the Page using jQuery
- How to Fix Div on Top When Scrolling Using jQuery
I hope you like this tutorial on how to show/hide images by scrolling down or up with jQuery.