Thursday, 13 February 2014

How to Floating DIV on Page Scroll jQuery Fixed Header DIV While Scrolling Using Jquery c#

How to Floating DIV on Page Scroll  jQuery Fixed Header DIV While Scrolling Using Jqueryc#

    <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=''></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;

    <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>
    <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">
                            <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>
                        <br class="clearLeft" />
            <!-- The main page content (just filler for this demo) -->
            <p> offers Download free Demo code source sample example program Articles of GridView JavaScript JQuery windows forms application in vb c#



No comments:

Post a Comment