In this article I will explain How to hide div
elements on scroll position using jQuery? 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.
Below is the jQuery Script code:
<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 >= 30) {
$('#divShow').hide()
$('#divHide').show()
}
else {
$('#divShow').show();
$('#divHide').hide()
}
});
})
</script>
Below is the Page design code:
<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 >= 30) {
$('#divShow').hide()
$('#divHide').show()
}
else {
$('#divShow').show();
$('#divHide').hide()
}
});
})
</script>
<style type="text/css">
.content {
border: 2px solid Red;
color: green;
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="divShow" class="content">
Show <a href="http://vatturidotnet.blogspot.in/" target="_blank"></a> <br />
Show <a href="http://vatturidotnet.blogspot.in/" target="_blank"></a> <br />
Show <a href="http://vatturidotnet.blogspot.in/" target="_blank"></a> <br />
Show <a href="http://vatturidotnet.blogspot.in/" target="_blank"></a> <br />
</div>
<div id="divHide" class="content" style="display:none">Div <a href="http://vatturidotnet.blogspot.in/" target="_blank"></a> </div>
<div style="height:500px"></div>
</form>
</body>
</html>
No comments:
Post a Comment