In this tutorial, learn how to Show Hide Div On Scroll using jQuery. Show div when mouse scroll up and hide div when mouse scroll down and opposite of it with jQuery.

You need to use the jQuery scrollTop() to find the scroll position and Show Hide Div On Scroll. Use the jQuery show/hide function to show the div and hide the div on mouse scroll. You may also like show/hide div on li hover using HTML and CSS and jQuery.

How to Show Hide Div On Scroll Down or Up Using jQuery

To show hide div on scroll mouse, you have to use the below example to get the use of jQuery function. Here, you have to use the jQuery scroll function to get the scroll event of the mouse. Also, you have to find the scroll top event of mouse and for this, you have to use scrollTop().

You need to use the if else condition of jQuery to find the position of the screen and show or hide the div on scroll in jQuery.

Example to show or hide div on the scroll

Output

  • Arunachal Pradesh
  • Himachal Pradesh
  • Uttar Pradesh
  • Madhya Pradesh
  • Andhra Pradesh

Now, scroll the screen using your mouse or use the scroll bar given to the right of the screen and scroll using the mouse. You have to notice here that when you reach the specified position of the screen. The div perform the show and hide effect of jQuery.

You can use as many div as you want and hide one div and display another div on scroll. This is the useful way when creating a beautiful website for your client.

You may also like to read.

Hope, you like this tutorial and if you any query regarding this tutorial. You can comment below or mail us to our mail id feedback@tutorialdeep.com

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.