Introduction:
Here I will explain jQuery floating div on page scroll example or jQuery fixed header div while scrolling of webpage example.
Here I will explain jQuery floating div on page scroll example or jQuery fixed header div while scrolling of webpage example.
Description:
In previous posts I explained jQuery fancy switch on and off, jQuery Google Currency Converter API Example, jQuery generate thumbnails from youtube videos, jQuery Change style of controls, jQuery Add fade in effect to webpage, and many articles relating to JQuery and modal popup. Now I will explain how to implement jQuery floating div on page scroll.
In previous posts I explained jQuery fancy switch on and off, jQuery Google Currency Converter API Example, jQuery generate thumbnails from youtube videos, jQuery Change style of controls, jQuery Add fade in effect to webpage, and many articles relating to JQuery and modal popup. Now I will explain how to implement jQuery floating div on page scroll.
To
implement this functionality we need to write the code like as shown below
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>jQuery - Creating a Floating Navigation DIV on Page Scroll</title>
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
<style type='text/css'>
body {
background-color: #333;
color: #999;
font: 12px/1.4em Arial,sans-serif;
}
#wrap {
margin: 10px auto;
background: #666;
padding: 10px;
width: 700px;
}
#header {
background-color: #666;
color: #FFF;
}
#logo {
font-size: 30px;
line-height: 40px;
padding: 5px;
}
#navWrap {
height: 30px;
}
#nav {
padding: 5px;
background: #999;
}
#nav ul {
margin: 0;
padding: 0;
}
#nav li {
float: left;
padding: 3px 8px;
background-color: #FFF;
margin: 0 10px 0 0;
color: #F00;
list-style-type: none;
}
#nav li a {
color: #F00;
text-decoration: none;
}
#nav li a:hover {
text-decoration: underline;
}
br.clearLeft {
clear: left;
}
</style>
<script type='text/javascript'>
$(function()
{
// Stick the #nav to the top of
the window
var nav = $('#nav');
var navHomeY = nav.offset().top;
var isFixed = false;
var $w = $(window);
$w.scroll(function()
{
var scrollTop = $w.scrollTop();
var shouldBeFixed = scrollTop > navHomeY;
if (shouldBeFixed && !isFixed) {
nav.css({
position: 'fixed',
top: 0,
left: nav.offset().left,
width: nav.width()
});
isFixed = true;
}
else if (!shouldBeFixed
&& isFixed) {
nav.css({
position: 'static'
});
isFixed = false;
}
});
});
</script>
</head>
<body>
<form id="form1">
<div id="wrap">
<!-- The header code,
including the menu -->
<div id="header">
<div id="logo">Start
Slowly Scrolling Down<br /> This
Page!</div>
<div id="navWrap">
<div id="nav">
<ul>
<li><a href="#" class="smoothScroll">Demo Link 1</a></li>
<li><a href="#" class="smoothScroll">Demo Link 2</a></li>
<li><a href="#" class="smoothScroll">Demo Link 3</a></li>
<li><a href="#" class="smoothScroll">Demo Link 4</a></li>
</ul>
<br class="clearLeft" />
</div>
</div>
</div>
<!-- The main page content
(just filler for this demo) -->
<p>
Aspdotnet-Suresh offers Asp.net,C#.net,SQL
Server,Web Services,WCF,WPF,MVC,Crystal
Reports,AJAX,XML,JavaScript,JQuery,Gridview articles, samples and
tutorials,code examples of asp.net 2.0,3.0,3.5,4.0 and Articles,examples of
.net technologies.
</p>
<p>
Aspdotnet-Suresh offers Asp.net,C#.net,SQL
Server,Web Services,WCF,WPF,MVC,Crystal
Reports,AJAX,XML,JavaScript,JQuery,Gridview articles, samples and
tutorials,code examples of asp.net 2.0,3.0,3.5,4.0 and Articles,examples of
.net technologies.
</p>
<p>
Aspdotnet-Suresh offers Asp.net,C#.net,SQL
Server,Web Services,WCF,WPF,MVC,Crystal
Reports,AJAX,XML,JavaScript,JQuery,Gridview articles, samples and
tutorials,code examples of asp.net 2.0,3.0,3.5,4.0 and Articles,examples of
.net technologies.
</p>
<p>
Aspdotnet-Suresh offers Asp.net,C#.net,SQL
Server,Web Services,WCF,WPF,MVC,Crystal
Reports,AJAX,XML,JavaScript,JQuery,Gridview articles, samples and
tutorials,code examples of asp.net 2.0,3.0,3.5,4.0 and Articles,examples of
.net technologies.
</p>
<p>
Aspdotnet-Suresh offers Asp.net,C#.net,SQL
Server,Web Services,WCF,WPF,MVC,Crystal
Reports,AJAX,XML,JavaScript,JQuery,Gridview articles, samples and
tutorials,code examples of asp.net 2.0,3.0,3.5,4.0 and Articles,examples of
.net technologies.
</p>
<p>
Aspdotnet-Suresh offers Asp.net,C#.net,SQL
Server,Web Services,WCF,WPF,MVC,Crystal
Reports,AJAX,XML,JavaScript,JQuery,Gridview articles, samples and
tutorials,code examples of asp.net 2.0,3.0,3.5,4.0 and Articles,examples of
.net technologies.
</p>
<p>
Aspdotnet-Suresh offers Asp.net,C#.net,SQL
Server,Web Services,WCF,WPF,MVC,Crystal
Reports,AJAX,XML,JavaScript,JQuery,Gridview articles, samples and
tutorials,code examples of asp.net 2.0,3.0,3.5,4.0 and Articles,examples of
.net technologies.
</p>
<p>
Aspdotnet-Suresh offers Asp.net,C#.net,SQL
Server,Web Services,WCF,WPF,MVC,Crystal
Reports,AJAX,XML,JavaScript,JQuery,Gridview articles, samples and
tutorials,code examples of asp.net 2.0,3.0,3.5,4.0 and Articles,examples of
.net technologies.
</p>
<p>
Aspdotnet-Suresh offers Asp.net,C#.net,SQL
Server,Web Services,WCF,WPF,MVC,Crystal
Reports,AJAX,XML,JavaScript,JQuery,Gridview articles, samples and
tutorials,code examples of asp.net 2.0,3.0,3.5,4.0 and Articles,examples of
.net technologies.
</p>
<p>
Aspdotnet-Suresh offers Asp.net,C#.net,SQL
Server,Web Services,WCF,WPF,MVC,Crystal
Reports,AJAX,XML,JavaScript,JQuery,Gridview articles, samples and
tutorials,code examples of asp.net 2.0,3.0,3.5,4.0 and Articles,examples of
.net technologies.
</p>
<p>
Aspdotnet-Suresh offers Asp.net,C#.net,SQL
Server,Web Services,WCF,WPF,MVC,Crystal
Reports,AJAX,XML,JavaScript,JQuery,Gridview articles, samples and
tutorials,code examples of asp.net 2.0,3.0,3.5,4.0 and Articles,examples of
.net technologies.
</p>
<p>
Aspdotnet-Suresh offers Asp.net,C#.net,SQL
Server,Web Services,WCF,WPF,MVC,Crystal
Reports,AJAX,XML,JavaScript,JQuery,Gridview articles, samples and
tutorials,code examples of asp.net 2.0,3.0,3.5,4.0 and Articles,examples of
.net technologies.
</p>
<p>
Aspdotnet-Suresh offers Asp.net,C#.net,SQL
Server,Web Services,WCF,WPF,MVC,Crystal
Reports,AJAX,XML,JavaScript,JQuery,Gridview articles, samples and
tutorials,code examples of asp.net 2.0,3.0,3.5,4.0 and Articles,examples of
.net technologies.
</p>
<p>
Aspdotnet-Suresh offers Asp.net,C#.net,SQL
Server,Web Services,WCF,WPF,MVC,Crystal
Reports,AJAX,XML,JavaScript,JQuery,Gridview articles, samples and
tutorials,code examples of asp.net 2.0,3.0,3.5,4.0 and Articles,examples of
.net technologies.
</p>
<p>
Aspdotnet-Suresh offers Asp.net,C#.net,SQL
Server,Web Services,WCF,WPF,MVC,Crystal
Reports,AJAX,XML,JavaScript,JQuery,Gridview articles, samples and
tutorials,code examples of asp.net 2.0,3.0,3.5,4.0 and Articles,examples of
.net technologies.
</p>
<p>
Aspdotnet-Suresh offers Asp.net,C#.net,SQL
Server,Web Services,WCF,WPF,MVC,Crystal
Reports,AJAX,XML,JavaScript,JQuery,Gridview articles, samples and
tutorials,code examples of asp.net 2.0,3.0,3.5,4.0 and Articles,examples of
.net technologies.
</p>
<p>
Aspdotnet-Suresh offers Asp.net,C#.net,SQL
Server,Web Services,WCF,WPF,MVC,Crystal
Reports,AJAX,XML,JavaScript,JQuery,Gridview articles, samples and
tutorials,code examples of asp.net 2.0,3.0,3.5,4.0 and Articles,examples of
.net technologies.
</p>
<p>
Aspdotnet-Suresh offers Asp.net,C#.net,SQL
Server,Web Services,WCF,WPF,MVC,Crystal
Reports,AJAX,XML,JavaScript,JQuery,Gridview articles, samples and
tutorials,code examples of asp.net 2.0,3.0,3.5,4.0 and Articles,examples of
.net technologies.
</p>
<p>
Aspdotnet-Suresh offers Asp.net,C#.net,SQL
Server,Web Services,WCF,WPF,MVC,Crystal
Reports,AJAX,XML,JavaScript,JQuery,Gridview articles, samples and
tutorials,code examples of asp.net 2.0,3.0,3.5,4.0 and Articles,examples of
.net technologies.
</p>
<p>
Aspdotnet-Suresh offers Asp.net,C#.net,SQL
Server,Web Services,WCF,WPF,MVC,Crystal
Reports,AJAX,XML,JavaScript,JQuery,Gridview articles, samples and
tutorials,code examples of asp.net 2.0,3.0,3.5,4.0 and Articles,examples of
.net technologies.
</p>
<p>
Aspdotnet-Suresh offers Asp.net,C#.net,SQL
Server,Web Services,WCF,WPF,MVC,Crystal
Reports,AJAX,XML,JavaScript,JQuery,Gridview articles, samples and
tutorials,code examples of asp.net 2.0,3.0,3.5,4.0 and Articles,examples of
.net technologies.
</p>
<p>
Aspdotnet-Suresh offers Asp.net,C#.net,SQL
Server,Web Services,WCF,WPF,MVC,Crystal
Reports,AJAX,XML,JavaScript,JQuery,Gridview articles, samples and
tutorials,code examples of asp.net 2.0,3.0,3.5,4.0 and Articles,examples of
.net technologies.
</p>
<p>
Aspdotnet-Suresh offers Asp.net,C#.net,SQL
Server,Web Services,WCF,WPF,MVC,Crystal
Reports,AJAX,XML,JavaScript,JQuery,Gridview articles, samples and
tutorials,code examples of asp.net 2.0,3.0,3.5,4.0 and Articles,examples of
.net technologies.
</p>
</div>
</form>
</body>
</html>
|
By using above code we can implement floating dvi
with scrolling. If you want to know more about above code check original site jQuery
floating Menu.
Demo
 |
|
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 Email
|
|||
7 comments :
great!
v good but please attach file
if you copy paste the code everything will work that's why i haven't attached any files.
Nice one!
It works very well in FF
but
Not working in IE8
Yes, it runs properly in Firefox, but for me it is enough.
awesome!
Note: Only a member of this blog may post a comment.