带路标的侧边栏

Question

嘿，我叫 Kasper！

我在我的投资组合网站上制作了一个边栏，我前几天刚了解到#Way points。

现在我想将它添加到我的菜单栏，但我似乎做不对，这就是我的代码：

   <!-- /#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 ----------------------------------------------------------------------->

代码可以在以下位置看到：http://kaslabdesign.dk/

现在我想要发生的是每次我来到我的菜单点之一我们所在的菜单点需要高亮。

我看过一些指南，但其中 none 与我的具体问题有任何关系。我希望任何人都可以帮助我解决我的问题，因为我很快就会因此而秃头。

祝你愉快 day/evening & 感谢您阅读本文。最好的问候卡斯帕。

p.s希望有人能帮助我；）！我希望我解释得足够好..

Answer 1

尝试使用 http://imakewebthings.com/waypoints/guides/jquery-zepto/ 将每个块作为航路点处理，当它被击中时，在菜单中突出显示相关的 link。该关联由 href 属性建立。

$(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>

带路标的侧边栏

Side bar with Way points

html

css

jquery-waypoints