| <link href='https://fonts.googleapis.com/css?family=Share+Tech&subset=latin,latin-ext' rel='stylesheet' type='text/css'> | |
| <body data-spy="scroll" data-target="#side-nav"> | |
| <div class="container"> | |
| <div class="row"> | |
| <div id="side-nav"> | |
| <ul class="nav nav-list affix"> | |
| <li><a href="#start">*Scroll Spy<br><sub>vertical height</sub></a></li> | |
| <li><a href="#one">N°1</a></li> | |
| <li><a href="#two">N°2</a></li> | |
| <li><a href="#three">N°3</a></li> | |
| </ul> | |
| </div> | |
| <div class="col-md-offset-3 col-md-9 content"> | |
| <div id="start" class="h1-wrap"> | |
| <h1 class="shareTech opacity">Scroll Spy Vertical Height Demo</h1> | |
| <div class="puppyWrap"><div class="puppyCover opacity"></div> | |
| <img class="topImage" src="http://www.drawing-factory.com/image-files/how-to-draw-a-puppy-labrador11.jpg" /> | |
| </div> | |
| </div> | |
| <section id="one"> | |
| <h2 class="shareTech">Section 1</h2> | |
| <p> | |
| Scroll spy is very fun but pretty tricky when it's activated by id's with elements of varying heights. | |
| </p> | |
| </section> | |
| <section id="two"> | |
| <h2 class="shareTech">Section 2</h2> | |
| <p> | |
| <strong>Note:</strong> If the nav list is of a certain height and is the trigger element well - you could run into problems when consider spy activation. | |
| </p> | |
| </section> | |
| <section id="three"> | |
| <h2 class="shareTech">Section 3</h2> | |
| <p> | |
| If you're rendering trigger id elements dynamically it's best to make sure that you're setting the height of the element as well; particularly if the element height is small. | |
| </p> | |
| </section> | |
| <sub>Disclaimer: this is mainly an issue for desktop viewing so this example will not depercate nicely. You're welcome. ;) The background image is from <a href="http://www.drawing-factory.com/">The Drawing Factory</a>.</sub> | |
| </div> | |
| </div> | |
| </div> | |
| </body> |
By setting the vertical height of each section when using bootstrap scrollspy each item in the nav will highlight.
This is fix for when a particular section has a height that is relative to the height of the left nave item.
A Pen by Jeff Wainwright on CodePen.
| <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> | |
| <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script> | |
| <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script> |
| body, body a { | |
| background:#FAF7FA; | |
| color: #A76AD9; | |
| } | |
| body .nav-list>.active>a{ | |
| background-color:#DDBFF5; | |
| } | |
| body .nav-list>.active>a:hover { | |
| background:#A146C2; | |
| } | |
| body .nav a:hover{ | |
| color:#DDBFF5; | |
| background-color: #F7EDFA; | |
| } | |
| #side-nav { | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| #side-nav:before, | |
| #side-nav:after { | |
| content: ' '; | |
| display: table; | |
| } | |
| #side-nav:after { | |
| clear: both; | |
| } | |
| .shareTech { | |
| font-family: 'Share Tech', sans-serif; | |
| } | |
| .nav-list li a { | |
| height:80px; | |
| font-size:2em; | |
| line-height:80px; | |
| } | |
| .opacity, section { | |
| opacity:.7; | |
| } | |
| .h1-wrap { | |
| padding:1em 1em 5em 2em; | |
| background-color: #F7EDFA; | |
| margin-bottom:1em; | |
| } | |
| h1:first-of-type { | |
| color:#A146C2; | |
| font-size:3em; | |
| margin-top:1em; | |
| margin-left:25%; | |
| } | |
| .topImage { | |
| display:inline-block; | |
| height:auto; | |
| width:40%; | |
| margin-left:30%; | |
| } | |
| .puppyCover { | |
| background-color: #F5E8FA; | |
| position:relative; | |
| width:40%; | |
| height:332px; | |
| margin-bottom:-332px; | |
| margin-left:30%; | |
| } | |
| section { | |
| background-color: #F2EBF7; | |
| height:300px; | |
| margin-bottom:1em; | |
| padding: 1em 1em .5em 1em; | |
| } | |
| section + section { | |
| height:220px /* note the section height here! */ | |
| } | |
| section + section + section { | |
| height:400px | |
| } | |
| section h2 { | |
| font-size:2em; | |
| line-height:2.5em; | |
| } | |
| section h2:first-letter { | |
| font-size:3em; | |
| } | |
| section p { | |
| float:right; | |
| font-size:1.5em; | |
| line-height:1.6em; | |
| width:50%; | |
| } | |
| sub { | |
| background:#A76AD9; | |
| color:#fff; | |
| padding:1em; | |
| display:block; | |
| float:right; | |
| font-size:1em; | |
| line-height:1.1em; | |
| margin-bottom:2em; | |
| margin-right:1em; | |
| width:50%; | |
| } | |
| sub a { | |
| background:none; | |
| color:#fff; | |
| } | |
| sub a:hover { | |
| color:#fff; | |
| text-decoration:underline; | |
| } | |
| @media only screen and (max-width: 1200px) { | |
| #side-nav, .puppyWrap {display:none;} | |
| .col-md-offset-3 { | |
| margin-left: 0; | |
| } | |
| .col-md-9 { | |
| width: 100%; | |
| } | |
| } |
| <link href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" rel="stylesheet" /> | |
| <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" /> |