Created
May 19, 2014 06:56
-
-
Save xianhuazhou/9be4fe809103591fd702 to your computer and use it in GitHub Desktop.
fixed positions of nav & highlight nav items
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| div.logo { | |
| height: 100px; | |
| } | |
| li.active { | |
| color: yellow; | |
| background: #cdecde; | |
| } | |
| #nav ul li { | |
| width: 20em; | |
| } | |
| p.content { | |
| width: 100%; | |
| height: 600px; | |
| border: 1px solid gray; | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $(function() { | |
| var nav = $('#nav'); | |
| var logo = $('#logo'); | |
| var timer = false; | |
| var navOffset = nav.offset(); | |
| var logoHeight = logo.height(); | |
| var navLis = nav.find('ul li'); | |
| var h2s = $('#main h2'); | |
| var navPosition = nav.css('position'); | |
| function getScrollTop() { | |
| return $(window).scrollTop(); | |
| } | |
| function fixNav(scrollTop) { | |
| if (scrollTop > logoHeight) { | |
| nav.css({position: 'fixed', top: '0'}); | |
| } else { | |
| nav.css({position: navPosition}); | |
| } | |
| } | |
| function highNav(scrollTop) { | |
| h2s.each(function(idx, it) { | |
| var top = scrollTop; | |
| var bottom = scrollTop + $(window).height(); | |
| var itTop = $(it).offset().top; | |
| if (top < itTop && itTop < bottom) { | |
| navLis.removeClass('active'); | |
| navLis.each(function(idx, li) { | |
| if ($(li).html().indexOf($(it).html()) !== -1) { | |
| return $(li).addClass('active'); | |
| } | |
| }); | |
| } | |
| }); | |
| } | |
| function doScroll() { | |
| var scrollTop = getScrollTop(); | |
| fixNav(scrollTop); | |
| highNav(scrollTop); | |
| } | |
| $(window).on('scroll', function() { | |
| if (timer) { | |
| return; | |
| } | |
| timer = setTimeout(function() { | |
| doScroll(); | |
| timer = false; | |
| }, 100); | |
| }); | |
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Hi</title> | |
| <meta charset="utf8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <link rel="stylesheet" href="css/bootstrap.css"> | |
| <link rel="stylesheet" href="css/bootstrap-theme.css"> | |
| <link rel="stylesheet" href="css/app.css"> | |
| </head> | |
| <body> | |
| <div class="container-fluid"> | |
| <div class="row"> | |
| <div class="col-md-4"> | |
| <div class="log" id="logo">Logo here</div> | |
| <div id="nav"> | |
| <ul class="nav nav-stack"> | |
| <li class="active"><a href="#">Nav1</a></li> | |
| <li><a href="#">Nav2</a></li> | |
| <li><a href="#">Nav3</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="col-md-6 col-md-offset-2" id="main"> | |
| <h2>Nav1</h2> | |
| <p class="content">blablabla 1</p> | |
| <h2>Nav2</h2> | |
| <p class="content">blablabla 2</p> | |
| <h2>Nav3</h2> | |
| <p class="content">blablabla 3</p> | |
| </div> | |
| </div> | |
| </div> | |
| <script src="js/jquery-1.11.1.js"></script> | |
| <script src="js/bootstrap.js"></script> | |
| <script src="js/app.js"></script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment