Introduction:
Here I will explain jQuery floating navigation menu with scrolling or jQuery smooth navigation floating menu with page scroller or jQuery move menu with scroll of webpage example in asp.net.
Here I will explain jQuery floating navigation menu with scrolling or jQuery smooth navigation floating menu with page scroller or jQuery move menu with scroll of webpage example in asp.net.
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 menu with scrolling in asp.net.
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 menu with scrolling in asp.net.
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>Demo - Creating a Floating Navigation Menu</title>
<!-- Include jQuery -->
<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'>
//<![CDATA[
$(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"
runat="server">
<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 menu
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
|
|||
3 comments :
although i am familiar with JSP,servlets,jdbc,javabeans and other J2ee component but these days i am comparing those stuff doing in .net technology and i find your blog very informative..thanks a ton
Not working Properly on setting Master Pages..Please Help :(
Note: Only a member of this blog may post a comment.