|
|
| Line 58: |
Line 58: |
| | | | |
| | <!--------------------------------------------------------------navbar------------------------------------------------------------------------------> | | <!--------------------------------------------------------------navbar------------------------------------------------------------------------------> |
| − | <style>
| |
| − | 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>
| |
| − | $(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;
| |
| − | }
| |
| − | });
| |
| − | });
| |
| − | 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;
| |
| − | }
| |
| − | nav.css({
| |
| − | position: 'fixed',
| |
| − | top: 0,
| |
| − | left: nav.offset().left,
| |
| − | width: nav.width()
| |
| − | });
| |
| − | isFixed = true;
| |
| − | nav.css({
| |
| − | position: 'static'
| |
| − | });
| |
| − | isFixed = false;
| |
| − | </script>
| |
| − |
| |
| − | <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>
| |
| − |
| |
| − |
| |
| | | | |
| | <!--------------------------------------------------------------video------------------------------------------------------------------------------> | | <!--------------------------------------------------------------video------------------------------------------------------------------------------> |
