Show Hide Image on Scroll Down or Up Using jQuery

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.

Test it Live

Output

Manager Show Hide Image on Scroll Down or Up Using jQuery

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.

I hope you like this tutorial on how to show/hide images by scrolling down or up with jQuery.