Aspdotnet-Suresh

aspdotnet-suresh offers C#.net articles and tutorials,csharp dot net,asp.net articles and tutorials,VB.NET Articles,Gridview articles,code examples of asp.net 2.0 /3.5,AJAX,SQL Server Articles,examples of .net technologies

jQuery Floating Navigation Menu Scrolling | jQuery Move Menu with Scroll of WebPage

Jan 7, 2013
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.

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.

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

for live demo check this site jQuery smooth scrolling floating Menu

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 RSS subscribe by email Subscribe by Email

3 comments :

amaz said...

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

Anonymous said...
This comment has been removed by a blog administrator.
Anonymous said...

Not working Properly on setting Master Pages..Please Help :(

Give your Valuable Comments

Note: Only a member of this blog may post a comment.

© 2015 Aspdotnet-Suresh.com. All Rights Reserved.
The content is copyrighted to Suresh Dasari and may not be reproduced on other websites without permission from the owner.