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#

<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">
            
            <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>
            
            <p>fantasyaspnet.blogspot.com offers Download free Demo code source sample example program Articles of GridView JavaScript JQuery windows forms application in vb c# asp.net

</p>
</div>
</form>
</body>
</html>

Download

Asp.Net

Pages

Thursday, 13 February 2014

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

No comments:

Post a Comment