Show/Hide Div On Scroll Position Up or Down in jQuery

Last Updated on June 3, 2021 by Roshan Parihar

In this tutorial, learn how to show/hide div on scroll position up or down in jQuery. The short answer is to use jQuery $(window).scroll() with show() and hide() inside as given in the example here. It finds the mouse scroll position whether it’s scrolling up or down to display or hide the div element on scroll.

Let’s find out with the example given below to show div on scroll up and hide div on scroll down.

How to Show Hide Div On Scroll Position Using jQuery

You have to use the $(window).scroll() with the scrollTop() method to determine the scrolling position from the top. When the user scrolls the mouse and reached the specified screen position, it displays the content to the user.

Use the if-else condition of jQuery to find the position of the screen using jQuery. Inside the if-else condition, you have to use the jQuery show() and hide() function to show the div after some duration when it reaches the specified screen position.

Test it Live

<script>
$(window).scroll(function() {
if ($(this).scrollTop()>250)
{
$('.myDiv').hide(1000);
}
else
{
$('.myDiv').show(1000);
}
});
</script>
<div class="myDiv">
<ul>
<li>Arunachal Pradesh</li>
<li>Himachal Pradesh</li>
<li>Uttar Pradesh</li>
<li>Madhya Pradesh</li>
<li>Andhra Pradesh</li>
</ul>
</div>

$(window).scroll(function() {

if ($(this).scrollTop()>250)

{

$('.myDiv').hide(1000);

}

else

{

$('.myDiv').show(1000);

}

});

</script>

<ul>

<li>Arunachal Pradesh</li>

<li>Himachal Pradesh</li>

<li>Uttar Pradesh</li>

<li>Madhya Pradesh</li>

<li>Andhra Pradesh</li>

</ul>

</div>

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 up and down position. You can notice here that when you reach the specified position of the screen, the div performs the show and hide effect of jQuery on scroll

The above example show div on scroll up and hide div on scroll down. You can change the position with the position given in the above example as 250. It helps you to define whether to display div on scrolling up and down.

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

Bonus: download a Free jQuery cheat sheet that will show you 20+ most important examples to learn in jQuery.

FAQS on Show/Hide Div on Scroll Position Up or Down in jQuery

1. How to Hide Div Element on Scroll Down Using jQuery?

Answer: You can use the jQuery hide() with the $(window).scroll() and scrollTop() method to hide the div element on scroll down. When the scrollTop() position is greater than the specified position, it means the person scrolling the window to the down position. On scrolling down, it hides the div element.

2. How to Show Div Element on Scroll Up Using jQuery?

Answer: You can use the jQuery show() with the $(window).scroll() and scrollTop() method to show the div element. When the scrollTop() position is less than the specified position, this shows that the person scrolling the window to the up position. On scrolling up, it shows the div element.

3. How Do You Show Div After Scrolling 100px From the Top of the Page?

Answer: You can specify the scrolling position 100px using the scrollTop() method. To show div after scrolling 100px from the top of the page, you have to use the if ($(this).scrollTop()>100) and use the show() inside it.

4. How Do I Initially Hide the Div?

Answer: To hide a div element initially, you can use the hide() of jQuery. You can also use the CSS display:none to apply to the div element to hide it initially.

5. How Do You Make a Div Appear on Scroll?

Answer: You have to initially hide the div element using the hide(). After that, you can use the if ($(this).scrollTop()>100) and use the show() inside it to make a div appear on scroll. The value 100 shows that you have specified the position 100px from the top. When you can scroll the position of your screen, it makes the div element appear on scroll.

DOWNLOAD Free jQuery CHEAT SHEET

You may also like to read.

jQuery Tutorial