Here am going explain fix your web page header when you scroll down your table or tr or div freeze that will appear.
Demo
Here is the sample Code:
<html>
<head>
<title>Fixed header using JQuery - www.mobiappsweb.com</title>
<script src="scripts/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
var div = $('#header');
var start = $(div).offset().top;
$.event.add(window, "scroll", function () {
var p = $(window).scrollTop();
$(div).css('position', ((p) > start) ? 'fixed' : 'static');
$(div).css('top', ((p) > start) ? '0px' : '');
});
});
</script>
</head>
<body style="font-family:Verdana">
<table>
<tr id="header" style="background:pink">
<td><h1>Your Fixed Header Here using JQuery by www.mobiappswebc.com</h1></td>
</tr>
<tr>
<td>
<h1>Fixed header using JQuery Example</h1>
<a href="http://www.mobiappsweb.com/2013/10/autocomplete-text-box-in-html.html">AutoComplete Textbox in HTML using DataList</a><br />
<p>Here am going to explain HTML textbox autocomplete without using any dynamic code Recently HTML has released one new HTML tag for auto Complete Textbox DataList Tag. </p>
<a href="http://www.mobiappsweb.com/2013/09/iphone-touch-screen-not-responding.html">iPhone touch screen not responding</a>
<p>Here am going to explain how to solve the problem when your iPhone,iPad and iPod touch screen not working.In my previous article am explained all features of iOS7 .After installed iOS7 into my iPhone after few days my touch screen not worked. Here is the Solution Restart Your Device:Solution 1: Hold the On/Off button until "slide to power off" appears. Slide to power off your device. When it is off, press the On/Off button to turn it back on. Solution 2: If you can't restart your device, reset it by pressing and holding...</p><br />
<a href="http://www.mobiappsweb.com/2013/07/download-eenadu-telugu-news-paper-app.html">Download Eenadu Telugu News paper app for iPhone,iPad and iPod</a>
<p>Eenadu is an Indian Telugu-language daily newspaper which is the largest circulated. Third party released Eenadu Telugu mobile application to read the news in online and offline from your IOS devices Features of Eenadu Telugu news paper mobile application: 1. Eenadu telugu news paper mobile application provides archives for last six days. 2. You can select the day by rotating the wheel in menu option. 3. Once the page is loaded...</p><br />
<a href="http://www.mobiappsweb.com/2013/07/iron-man3-free-game-for-android-and.html">Iron Man3 free Game for Android and iPhone</a>
<p>The biggest video game developer GameLoft released official Iron Man 3 Game with excellent Graphics on April 25 with free of cost. Get ready for this addictive, endless 3D runner. GameLoft released for android and IOS devices only. It is not supported windows and blackberry mobiles. Requirements for IOS Devices: Compatible with iPhone 4, iPhone 4S, iPhone 5, iPod touch (4th generation), iPod touch (5th generation), iPad 2...</p>
</td>
</tr>
<tr>
<td>Your Footer here</td>
</tr>
</table>
</body>
</html>
Demo
<html>
<head>
<title>Fixed header using JQuery - www.mobiappsweb.com</title>
<script src="scripts/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
var div = $('#header');
var start = $(div).offset().top;
$.event.add(window, "scroll", function () {
var p = $(window).scrollTop();
$(div).css('position', ((p) > start) ? 'fixed' : 'static');
$(div).css('top', ((p) > start) ? '0px' : '');
});
});
</script>
</head>
<body style="font-family:Verdana">
<table>
<tr id="header" style="background:pink">
<td><h1>Your Fixed Header Here using JQuery by www.mobiappswebc.com</h1></td>
</tr>
<tr>
<td>
<h1>Fixed header using JQuery Example</h1>
<a href="http://www.mobiappsweb.com/2013/10/autocomplete-text-box-in-html.html">AutoComplete Textbox in HTML using DataList</a><br />
<p>Here am going to explain HTML textbox autocomplete without using any dynamic code Recently HTML has released one new HTML tag for auto Complete Textbox DataList Tag. </p>
<a href="http://www.mobiappsweb.com/2013/09/iphone-touch-screen-not-responding.html">iPhone touch screen not responding</a>
<p>Here am going to explain how to solve the problem when your iPhone,iPad and iPod touch screen not working.In my previous article am explained all features of iOS7 .After installed iOS7 into my iPhone after few days my touch screen not worked. Here is the Solution Restart Your Device:Solution 1: Hold the On/Off button until "slide to power off" appears. Slide to power off your device. When it is off, press the On/Off button to turn it back on. Solution 2: If you can't restart your device, reset it by pressing and holding...</p><br />
<a href="http://www.mobiappsweb.com/2013/07/download-eenadu-telugu-news-paper-app.html">Download Eenadu Telugu News paper app for iPhone,iPad and iPod</a>
<p>Eenadu is an Indian Telugu-language daily newspaper which is the largest circulated. Third party released Eenadu Telugu mobile application to read the news in online and offline from your IOS devices Features of Eenadu Telugu news paper mobile application: 1. Eenadu telugu news paper mobile application provides archives for last six days. 2. You can select the day by rotating the wheel in menu option. 3. Once the page is loaded...</p><br />
<a href="http://www.mobiappsweb.com/2013/07/iron-man3-free-game-for-android-and.html">Iron Man3 free Game for Android and iPhone</a>
<p>The biggest video game developer GameLoft released official Iron Man 3 Game with excellent Graphics on April 25 with free of cost. Get ready for this addictive, endless 3D runner. GameLoft released for android and IOS devices only. It is not supported windows and blackberry mobiles. Requirements for IOS Devices: Compatible with iPhone 4, iPhone 4S, iPhone 5, iPod touch (4th generation), iPod touch (5th generation), iPad 2...</p>
</td>
</tr>
<tr>
<td>Your Footer here</td>
</tr>
</table>
</body>
</html>
0 comments:
Post a Comment