"Navigation"
Bootstrap 4.0.0 Snippet by Ashikpolin

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div> <nav role="navigation" id="nav"> <ul> <li><a href="#top">Header</a></li> <li> <a href="#food">Food</a> <ul> <li><a href="#A1">Article A1</a></li> <li><a href="#A2">Aritcle A2</a></li> <li><a href="#A3">Aritcle A3</a></li> <li><a href="#A4">Aritcle A4</a></li> </ul> </li> <li> <a href="#fashion">Fashion</a> <ul> <li><a href="#B1">Aritcle B1</a></li> <li><a href="#B2">Aritcle B2</a></li> <li><a href="#B3">Aritcle B3</a></li> <li><a href="#B4">Aritcle B4</a></li> <li><a href="#B5">Aritcle B5</a></li> <li><a href="#B6">Aritcle B6</a></li> <li><a href="#B7">Aritcle B7</a></li> </ul> </li> <li> <a href="#abstract">Abstract</a> <ul> <li><a href="#C1">Aritcle C1</a></li> <li><a href="#C2">Aritcle C2</a></li> <li><a href="#C3">Aritcle C3</a></li> </ul> </li> <li><a href="#bot">Footer</a></li> </ul> </nav> <header id="top" class="responsive-fonts"> <h1>Navigation highlighting using waypoints</h1> <p>marking sections and articles in view (click or scroll to test)<p> </header> <aside> <a href="http://imakewebthings.com/jquery-waypoints">Build using jquery-waypoints</a> </aside> <main> <section id="food"> <article id="A1"></article> <article id="A2"></article> <article id="A3"></article> <article id="A4"></article> </section> <section id="fashion"> <article id="B1"></article> <article id="B2"></article> <article id="B3"></article> <article id="B4"></article> <article id="B5"></article> <article id="B6"></article> <article id="B7"></article> </section> <section id="abstract"> <article id="C1"></article> <article id="C2"></article> <article id="C3"></article> </section> </main> <footer id="bot"> <p>Footer stuff</p> </footer> </div>
@import url(https://fonts.googleapis.com/css?family=Raleway:400,700,300,500,600,100,200,800,900); *, *:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; } nav, aside, header, footer, aside, section, main, footer, aside, section, article { display: block; } body { background: #fcfcfc; } body > div { margin: 0 auto; max-width: 800px; } nav { background: #999; position: fixed; width: 140px; -webkit-box-shadow: -4px 4px 8px 0px rgba(0, 0, 0, 0.2); box-shadow: -4px 4px 8px 0px rgba(0, 0, 0, 0.2); padding: 1px; padding-top: 0; top: 20px; } header, footer, aside, section { float: left; clear: left; width: 100%; width: calc(100% - 180px); padding: 20px; margin-left: 140px; max-width: 640px; background: white; -webkit-box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.3); box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.3); } footer, aside { background: #f1f1f1; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; padding: 40px; } aside { padding: 20px 0; background-color: #fafafa; background-image: repeating-linear-gradient(-45deg, transparent, transparent 35px, white 35px, white 50px); } section { background: white; } article { float: left; width: 100%; padding: 20px; margin-bottom: 20px; min-height: 300px; } article:after { content: ''; display: block; position: relative; height: 4px; width: 100%; background-color: #fafafa; background-image: repeating-linear-gradient(-45deg, transparent, transparent 35px, white 35px, white 40px); } h1 { font: 300 2.9em/120% 'Raleway', sans-serif; margin-bottom: 10px; color: purple; } h1 + p { font: 500 14px/22px 'Raleway', sans-serif; margin-bottom: 0; margin-left: 20px; color: purple; } h1 + p:before { content: '- '; position: absolute; margin-left: -10px; } h2 { font: 300 36px/30px 'Raleway', sans-serif; margin-bottom: 20px; color: purple; } h3 { font: 400 24px/30px 'Raleway', sans-serif; margin-bottom: 20px; color: purple; } p { font: 14px/22px helvetica,arial,sans-serif; margin-bottom: 20px; } img { width: 100%; height: auto; margin-bottom: 20px; } a { display: block; font: 14px/22px helvetica,arial,sans-serif; color: purple; text-decoration: none; padding: 2px 20px; } a[href="#top"] { background: #340034; color: white; padding: 20px; text-align: center; font-size: 18px; } a[href="#bot"] { background: #670067; color: white; padding: 10px 20px; text-align: center; } nav > ul li a { background: #a6a6a6; color: white; } nav > ul li a.active, nav > ul li a:hover { background: purple; color: white; } nav > ul li ul li a { background: #fafafa; color: gray; } nav > ul li ul li a.active, nav > ul li ul li a:hover { background: #ffb3ff; color: purple; } ul li ul { text-indent: 20px; } a { -webkit-transition: all 0.5s ease-out; -moz-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; transition: all 0.5s ease-out; } @media (max-width: 200px) { .responsive-fonts { font-size: 25%; } } @media (min-width: 208px) { .responsive-fonts { font-size: 26%; } } @media (min-width: 216px) { .responsive-fonts { font-size: 27%; } } @media (min-width: 224px) { .responsive-fonts { font-size: 28%; } } @media (min-width: 232px) { .responsive-fonts { font-size: 29%; } } @media (min-width: 240px) { .responsive-fonts { font-size: 30%; } } @media (min-width: 248px) { .responsive-fonts { font-size: 31%; } } @media (min-width: 256px) { .responsive-fonts { font-size: 32%; } } @media (min-width: 264px) { .responsive-fonts { font-size: 33%; } } @media (min-width: 272px) { .responsive-fonts { font-size: 34%; } } @media (min-width: 280px) { .responsive-fonts { font-size: 35%; } } @media (min-width: 288px) { .responsive-fonts { font-size: 36%; } } @media (min-width: 296px) { .responsive-fonts { font-size: 37%; } } @media (min-width: 304px) { .responsive-fonts { font-size: 38%; } } @media (min-width: 312px) { .responsive-fonts { font-size: 39%; } } @media (min-width: 320px) { .responsive-fonts { font-size: 40%; } } @media (min-width: 328px) { .responsive-fonts { font-size: 41%; } } @media (min-width: 336px) { .responsive-fonts { font-size: 42%; } } @media (min-width: 344px) { .responsive-fonts { font-size: 43%; } } @media (min-width: 352px) { .responsive-fonts { font-size: 44%; } } @media (min-width: 360px) { .responsive-fonts { font-size: 45%; } } @media (min-width: 368px) { .responsive-fonts { font-size: 46%; } } @media (min-width: 376px) { .responsive-fonts { font-size: 47%; } } @media (min-width: 384px) { .responsive-fonts { font-size: 48%; } } @media (min-width: 392px) { .responsive-fonts { font-size: 49%; } } @media (min-width: 400px) { .responsive-fonts { font-size: 50%; } } @media (min-width: 408px) { .responsive-fonts { font-size: 51%; } } @media (min-width: 416px) { .responsive-fonts { font-size: 52%; } } @media (min-width: 424px) { .responsive-fonts { font-size: 53%; } } @media (min-width: 432px) { .responsive-fonts { font-size: 54%; } } @media (min-width: 440px) { .responsive-fonts { font-size: 55%; } } @media (min-width: 448px) { .responsive-fonts { font-size: 56%; } } @media (min-width: 456px) { .responsive-fonts { font-size: 57%; } } @media (min-width: 464px) { .responsive-fonts { font-size: 58%; } } @media (min-width: 472px) { .responsive-fonts { font-size: 59%; } } @media (min-width: 480px) { .responsive-fonts { font-size: 60%; } } @media (min-width: 488px) { .responsive-fonts { font-size: 61%; } } @media (min-width: 496px) { .responsive-fonts { font-size: 62%; } } @media (min-width: 504px) { .responsive-fonts { font-size: 63%; } } @media (min-width: 512px) { .responsive-fonts { font-size: 64%; } } @media (min-width: 520px) { .responsive-fonts { font-size: 65%; } } @media (min-width: 528px) { .responsive-fonts { font-size: 66%; } } @media (min-width: 536px) { .responsive-fonts { font-size: 67%; } } @media (min-width: 544px) { .responsive-fonts { font-size: 68%; } } @media (min-width: 552px) { .responsive-fonts { font-size: 69%; } } @media (min-width: 560px) { .responsive-fonts { font-size: 70%; } } @media (min-width: 568px) { .responsive-fonts { font-size: 71%; } } @media (min-width: 576px) { .responsive-fonts { font-size: 72%; } } @media (min-width: 584px) { .responsive-fonts { font-size: 73%; } } @media (min-width: 592px) { .responsive-fonts { font-size: 74%; } } @media (min-width: 600px) { .responsive-fonts { font-size: 75%; } } @media (min-width: 608px) { .responsive-fonts { font-size: 76%; } } @media (min-width: 616px) { .responsive-fonts { font-size: 77%; } } @media (min-width: 624px) { .responsive-fonts { font-size: 78%; } } @media (min-width: 632px) { .responsive-fonts { font-size: 79%; } } @media (min-width: 640px) { .responsive-fonts { font-size: 80%; } } @media (min-width: 648px) { .responsive-fonts { font-size: 81%; } } @media (min-width: 656px) { .responsive-fonts { font-size: 82%; } } @media (min-width: 664px) { .responsive-fonts { font-size: 83%; } } @media (min-width: 672px) { .responsive-fonts { font-size: 84%; } } @media (min-width: 680px) { .responsive-fonts { font-size: 85%; } } @media (min-width: 688px) { .responsive-fonts { font-size: 86%; } } @media (min-width: 696px) { .responsive-fonts { font-size: 87%; } } @media (min-width: 704px) { .responsive-fonts { font-size: 88%; } } @media (min-width: 712px) { .responsive-fonts { font-size: 89%; } } @media (min-width: 720px) { .responsive-fonts { font-size: 90%; } } @media (min-width: 728px) { .responsive-fonts { font-size: 91%; } } @media (min-width: 736px) { .responsive-fonts { font-size: 92%; } } @media (min-width: 744px) { .responsive-fonts { font-size: 93%; } } @media (min-width: 752px) { .responsive-fonts { font-size: 94%; } } @media (min-width: 760px) { .responsive-fonts { font-size: 95%; } } @media (min-width: 768px) { .responsive-fonts { font-size: 96%; } } @media (min-width: 776px) { .responsive-fonts { font-size: 97%; } } @media (min-width: 784px) { .responsive-fonts { font-size: 98%; } } @media (min-width: 792px) { .responsive-fonts { font-size: 99%; } }
// ====================================== // Helper functions // ====================================== // Get section or article by href function getRelatedContent(el){ return $($(el).attr('href')); } // Get link by section or article id function getRelatedNavigation(el){ return $('nav a[href=#'+$(el).attr('id')+']'); } // ====================================== // Smooth scroll to content // ====================================== $('nav a').on('click',function(e){ e.preventDefault(); $('html,body').animate({scrollTop:getRelatedContent(this).offset().top - 20}) }); // ====================================== // Waypoints // ====================================== // Default cwaypoint settings // - just showing var wpDefaults={ context: window, continuous: true, enabled: true, horizontal: false, offset: 0, triggerOnce: false }; $('section,article') .waypoint(function(direction) { // Highlight element when related content // is 10% percent from the bottom... // remove if below getRelatedNavigation(this).toggleClass('active', direction === 'down'); }, { offset: '90%' // }) .waypoint(function(direction) { // Highlight element when bottom of related content // is 100px from the top - remove if less // TODO - make function for this getRelatedNavigation(this).toggleClass('active', direction === 'up'); }, { offset: function() { return -$(this).height() + 100; } }); // ====================================== // Random content and navigation headers // ====================================== $('section').each(function(){ var cap=getRelatedNavigation(this).text(); $(this).prepend('<h2>'+cap+'</h2>') }) $('article').each(function(){ var cap=getRelatedNavigation(this).text(); var w=Math.ceil(Math.random()*200)+400; var h=w-200; var c=$(this).closest('section').attr('id'); $(this).html('<h3>'+cap+'</h3><img src="http://lorempixel.com/g/'+w+'/'+h+'/'+c+'">'+lipsum(5)); }) function lipsum(p){ var words='Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod'; words+='tempor incididunt ut labore et dolore magna aliqua ut enim ad minim veniam'; words+='quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo'; words+='consequat duis aute irure dolor in reprehenderit in voluptate velit esse'; words+='cillum dolore eu fugiat nulla pariatur excepteur sint occaecat cupidatat non'; words+='proident, sunt in culpa qui officia deserunt mollit anim id est laborum'; words=words.split(' '); lorem=''; for(var i=0;i<p;++i){ var w=Math.ceil( Math.random() * words.length -10 ) + 10; lorem+='<p>'+words.slice(0,w).join(' ')+'.</p>'; } return lorem; } /* Thoughts and good stuff Make event dispatchers more like: $('#elm').on('waypoint',function(e){ alert(e.direction); }) Offset functions - full - on screen - off screen - off screen top - off screen bottom - off screen left - off screen right - in range [top, bottom] - in from top - in from bottom //cdnjs.cloudflare.com/ajax/libs/html5shiv/r29/html5.min.js //cdnjs.cloudflare.com/ajax/libs/respond.js/1.3.0/respond.min.js //cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.2/jquery.ui.touch-punch.min.js //cdnjs.cloudflare.com/ajax/libs/jquery.touchswipe/1.6.4/jquery.touchSwipe.min.js //cdnjs.cloudflare.com/ajax/libs/waypoints/2.0.3/waypoints.min.js //cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.0/jquery.cookie.js */

Related: See More


Questions / Comments: