In this article, I am explain How to fixed header using jQuery
Desingner Source Code :
<head>
<meta name="generator"
content=
"HTML Tidy for Linux (vers 25 March 2009), see
www.w3.org">
<title>Auto Scroll Lock Header with jQuery</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"
type="text/javascript">
</script>
<style type="text/css">
table { background: black; color: white;}
body, td
{
font: 13px sans-serif;
}
#stickyheader
{
width: 100%;
height: 10px;
}
#stickyalias {
display: none;
height: 10px;
}
#unstickyheader {
margin-bottom: 15px;
}
#othercontent {
margin-top: 20px;
}
</style>
</head>
<body>
<script type="text/javascript">
$(function () {
// Check the initial Poistion of the Sticky Header
var stickyHeaderTop = $('#stickyheader').offset().top;
$(window).scroll(function () {
if ($(window).scrollTop() >
stickyHeaderTop) {
$('#stickyheader').css({ position: 'fixed', top: '0px'
});
$('#stickyalias').css('display', 'block');
} else {
$('#stickyheader').css({ position: 'static', top: '0px'
});
$('#stickyalias').css('display', 'none');
}
});
});
</script>
<div id="unstickyheader">
<p>This is some text that comes before our <strong>Sticky
Header</strong></p>
<p>This is some text that comes before our <strong>Sticky
Header</strong></p>
<p>This is some text that comes before our <strong>Sticky
Header</strong></p>
</div>
<div id="stickyheader">
<table width="100%">
<tr>
<td>Sticky Text 1</td>
<td>Sticky Text 2</td>
<td>Sticky Text 3</td>
<td>Sticky Text 4</td>
<td>Sticky Text 5</td>
</tr>
</table>
</div>
<div id="stickyalias"></div>
<div id="othercontent">
<p>Lorem ipsum dolor sit amet, consectetur
adipisicing elit,
sed do
eiusmod tempor incididunt ut labore et dolore magna
aliqua.
Ut enim ad minim veniam, quis nostrud exercitation
ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis
aute
irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat
cupidatat
non proident, sunt in culpa qui officia deserunt
mollit
anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur
adipisicing elit,
sed do
eiusmod tempor incididunt ut labore et dolore magna
aliqua.
Ut enim ad minim veniam, quis nostrud exercitation
ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis
aute
irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat
cupidatat
non proident, sunt in culpa qui officia deserunt
mollit
anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur
adipisicing elit,
sed do
eiusmod tempor incididunt ut labore et dolore magna
aliqua.
Ut enim ad minim veniam, quis nostrud exercitation
ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis
aute
irure dolor in reprehenderit in voluptate velit esse
cillum
dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat
non proident, sunt in culpa qui officia deserunt
mollit
anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur
adipisicing elit,
sed do
eiusmod tempor incididunt ut labore et dolore magna
aliqua.
Ut enim ad minim veniam, quis nostrud exercitation
ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis
aute
irure dolor in reprehenderit in voluptate velit esse
cillum
dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat
non proident, sunt in culpa qui officia deserunt
mollit
anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur
adipisicing elit,
sed do
eiusmod tempor incididunt ut labore et dolore magna
aliqua.
Ut enim ad minim veniam, quis nostrud exercitation
ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis
aute
irure dolor in reprehenderit in voluptate velit esse
cillum
dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat
non proident, sunt in culpa qui officia deserunt
mollit
anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur
adipisicing elit,
sed do
eiusmod tempor incididunt ut labore et dolore magna
aliqua.
Ut enim ad minim veniam, quis nostrud exercitation
ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis
aute
irure dolor in reprehenderit in voluptate velit esse
cillum
dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat
non proident, sunt in culpa qui officia deserunt
mollit
anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur
adipisicing elit,
sed do
eiusmod tempor incididunt ut labore et dolore magna
aliqua.
Ut enim ad minim veniam, quis nostrud exercitation
ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis
aute
irure dolor in reprehenderit in voluptate velit esse
cillum
dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat
non proident, sunt in culpa qui officia deserunt
mollit
anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur
adipisicing elit,
sed do
eiusmod tempor incididunt ut labore et dolore magna
aliqua.
Ut enim ad minim veniam, quis nostrud exercitation
ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis
aute
irure dolor in reprehenderit in voluptate velit esse
cillum
dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat
non proident, sunt in culpa qui officia deserunt
mollit
anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur
adipisicing elit,
sed do
eiusmod tempor incididunt ut labore et dolore magna
aliqua.
Ut enim ad minim veniam, quis nostrud exercitation
ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis
aute
irure dolor in reprehenderit in voluptate velit esse
cillum
dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat
non proident, sunt in culpa qui officia deserunt
mollit
anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur
adipisicing elit,
sed do
eiusmod tempor incididunt ut labore et dolore magna
aliqua.
Ut enim ad minim veniam, quis nostrud exercitation
ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis
aute
irure dolor in reprehenderit in voluptate velit esse
cillum
dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat
non proident, sunt in culpa qui officia deserunt
mollit
anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur
adipisicing elit,
sed do
eiusmod tempor incididunt ut labore et dolore magna
aliqua.
Ut enim ad minim veniam, quis nostrud exercitation
ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis
aute
irure dolor in reprehenderit in voluptate velit esse
cillum
dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat
non proident, sunt in culpa qui officia deserunt
mollit
anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur
adipisicing elit,
sed do
eiusmod tempor incididunt ut labore et dolore magna
aliqua.
Ut enim ad minim veniam, quis nostrud exercitation
ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis
aute
irure dolor in reprehenderit in voluptate velit esse
cillum
dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat
non proident, sunt in culpa qui officia deserunt
mollit
anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur
adipisicing elit,
sed do
eiusmod tempor incididunt ut labore et dolore magna
aliqua.
Ut enim ad minim veniam, quis nostrud exercitation
ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis
aute
irure dolor in reprehenderit in voluptate velit esse
cillum
dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat
non proident, sunt in culpa qui officia deserunt
mollit
anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur
adipisicing elit,
sed do
eiusmod tempor incididunt ut labore et dolore magna
aliqua.
Ut enim ad minim veniam, quis nostrud exercitation
ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis
aute
irure dolor in reprehenderit in voluptate velit esse
cillum
dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat
non proident, sunt in culpa qui officia deserunt
mollit
anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur
adipisicing elit,
sed do
eiusmod tempor incididunt ut labore et dolore magna
aliqua.
Ut enim ad minim veniam, quis nostrud exercitation
ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis
aute
irure dolor in reprehenderit in voluptate velit esse
cillum
dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat
non proident, sunt in culpa qui officia deserunt
mollit
anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur
adipisicing elit,
sed do
eiusmod tempor incididunt ut labore et dolore magna
aliqua.
Ut enim ad minim veniam, quis nostrud exercitation
ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis
aute
irure dolor in reprehenderit in voluptate velit esse
cillum
dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat
non proident, sunt in culpa qui officia deserunt
mollit
anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur
adipisicing elit,
sed do
eiusmod tempor incididunt ut labore et dolore magna
aliqua.
Ut enim ad minim veniam, quis nostrud exercitation
ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis
aute
irure dolor in reprehenderit in voluptate velit esse
cillum
dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat
non proident, sunt in culpa qui officia deserunt
mollit
anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur
adipisicing elit,
sed do
eiusmod tempor incididunt ut labore et dolore magna
aliqua.
Ut enim ad minim veniam, quis nostrud exercitation
ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis
aute
irure dolor in reprehenderit in voluptate velit esse
cillum
dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat
non proident, sunt in culpa qui officia deserunt
mollit
anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur
adipisicing elit,
sed do
eiusmod tempor incididunt ut labore et dolore magna
aliqua.
Ut enim ad minim veniam, quis nostrud exercitation
ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis
aute
irure dolor in reprehenderit in voluptate velit esse
cillum
dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat
non proident, sunt in culpa qui officia deserunt
mollit
anim id est laborum.</p>
</div>
</body>
</html>
Other Fixed Header:-
http://www.jqueryrain.com/demo/jquery-fixed-header/
No comments:
Post a Comment