In this tutorial, learn how to show hide image on scroll down or up with jQuery. Show image when scrolling down the screen or hide image when scrolling up the screen in jQuery. Display image when scrolling up the screen to the top.
Scrolling the screen to the top or to the bottom with show/hide effect, attract visitors and increase the look and feel. Initially, the image is in a visible state and hide 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
The scrolling effect somehow useful when you want to display content for some area of the screen only. To show hide image on scroll down, you have to use jQuery show/hide function with the scroll event of jQuery.
<img src="/images/user1.jpg" alt="Manager" class="img-responsive img-thumbnail"/>
Check the example given above, You also need to use the
scropTop() 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.
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 of how to show hide image on scroll down or up with jQuery. If you have any query regarding the tutorial, please comment below.
Also tell me, which method are you using to show the image when scrolling to the bottom and hide on the top scroll.