html - Side bar with Way points -


hey name kasper!

i'm making side bar on portfolio website, learned #way points day's ago.

and want add menu bar, can't seem right, code looks like:

   <!-- /#sidebar-wrapper ----------------------------------------------------------------------->         <div id="sidebar-wrapper">             <ul class="sidebar-nav">                 <div class="menu-links scroll-me">                     <li class="sidebar-brand">                         <div href="#">                             <a href="#header">                                 <img class="imagefixstyle" src="assets/img/logsmall.png" alt="sbnlogo" /></a>                         </div>                     </li>                     <hr />                     <li><a href="#about"><i class="fa fa-archive fa-2x"></i></a></li>                     <hr />                     <li><a href="#clients"><i class="fa fa-globe fa-spin fa-2x"></i></a></li>                     <hr />                     <li><a href="#newsletter"><i class="fa fa-user-plus fa-2x"></i></a></li>                     <hr />                     <li><a href="#contact"><i class="fa fa-mars-stroke fa-2x"></i></a></li>                     <hr />                     <li><a href="#contactme"><i class="fa fa-envelope fa-2x"></i></a></li>                     <hr />                 </div>             </ul>         </div>         <!-- /#sidebar-wrapper -----------------------------------------------------------------------> 

the code can seen in action on : http://kaslabdesign.dk/

now want happen each time come 1 of menu points menu point @ needs high lighted.

i have looked @ guides none of them have specific problem. hope can me solve problem since i'm bald because of this.

have nice day/evening & thank reading this. best regards kasper.

p.s hope can me ;)! , hope explain enought..

try using http://imakewebthings.com/waypoints/guides/jquery-zepto/ handle each block waypoint , when hit, highlight associated link in menu. association made href attribute.

$(function() {     $('p').waypoint({         handler: function(direction) {    	$("a").css("color", "");      $("a[href='#" + this.element.id + "']").css("color", "red");    }  })  });
ul {    position:fixed;    top:0;    left:0;  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>  <script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.0/jquery.waypoints.js"></script>  <ul>  <li>    <a href="#item1">item1</a>  </li>  <li>    <a href="#item2">item2</a>  </li>  <li>    <a href="#item3">item3</a>  </li>  </ul>  <div>    <p id="item1">a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br></p>    <p id="item2">a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br></p>    <p id="item3">a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br></p>  </div>


Comments

Popular posts from this blog

javascript - jQuery: Add class depending on URL in the best way -

caching - How to check if a url path exists in the service worker cache -

Redirect to a HTTPS version using .htaccess -