Aspdotnet-Suresh

aspdotnet-suresh offers C#.net articles and tutorials,csharp dot net,asp.net articles and tutorials,VB.NET Articles,Gridview articles,code examples of asp.net 2.0 /3.5,AJAX,SQL Server Articles,examples of .net technologies

jQuery Show Hide Div Element on Scroll Position Example

May 11, 2016
Introduction:

Here I will explain how to use
jQuery to show hide div element on scroll position or show hide div on scroll position in jQuery or show / hide element on scroll jQuery. In jQuery by using window.scroll property we can show or hide div element based on position.


To show or hide div on scroll position in jQuery we need to write the code like as shown below


<script type="text/javascript">
$(function () {
$(window).scroll(function(){
var scroll = $(window).scrollTop();
if (scroll >= 57) {
$('#testdiv').hide()
}
else{
$('#testdiv').show();
}
});
})
</script>

Here if you observe above syntax we are hiding div if scroll position greater than 57 otherwise we are showing div.

If you want to check it in complete example you need to write the code like as shown below


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery show Hide Div on Scroll example</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(function () {
$(window).scroll(function(){
var scroll = $(window).scrollTop();
if (scroll >= 57) {
$('#testdiv').hide()
$('#hidediv').show()
}
else{
$('#testdiv').show();
$('#hidediv').hide()
}
});
})
</script>
<style type="text/css">
.content
{
border: 2px solid Red;
color: #008000;
padding: 10px;
width: 400px;
font-family:Calibri;
font-size:16pt
}
</style>
</head>
<body>
<form id="form1">
<h2>jQuery show Hide Div on Scroll example</h2>
<div style="height:50px"></div>
<div id="testdiv" class="content" >
Welcome to Aspdotnet-Suresh.com<br />
Welcome to Aspdotnet-Suresh.com<br />
Welcome to Aspdotnet-Suresh.com<br />
Welcome to Aspdotnet-Suresh.com<br />
</div>
<div id="hidediv" class="content" style="display:none">Div Hided on Scroll</div>
<div style="height:500px"></div>
</form>
</body>
</html>

Demo

Check following demo to show or hide div on scroll in jQuery.




If you enjoyed this post, please support the blog below. It's FREE!

Get the latest Asp.net, C#.net, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email.

subscribe by rss Subscribe by RSS subscribe by email Subscribe by Email

2 comments :

Gopal Sharma said...

Very Heplpful... Suresh.
Keep it up.

Anonymous said...

Why 57 ?

Give your Valuable Comments

Other Related Posts

© 2015 Aspdotnet-Suresh.com. All Rights Reserved.
The content is copyrighted to Suresh Dasari and may not be reproduced on other websites without permission from the owner.