Question

我正在使用Skrollr制作网站。

大部分都是完整的，除了我想添加侧面导航，以便这些导航点随着用户在网站中的进展而改变颜色（类似于http://www.beautyofbrewing.com/）。

所以我天真地尝试的代码片段是：

<div id="nav">
        <ul>
            <li class="home"><a data-menu-top="0" href="#one">Home</a></li>
            <li class="wakeup"><a data-menu-top="3100" href="#wakeup">Wake up</a></li>
            <li class="plan"><a data-menu-top="9000" href="#plan">Plan your day</a></li>
            <li class="health"><a data-menu-top="9000" href="#health">Health</a></li>
        </ul>
</div>

    <div id="one" data-top="$('home').addClass('active');" >
        <div class="logo" data-anchor-target="#one" 
            data-top="transform: scale(1) translateY(80px);" 
            data--200-top="transform: scale(1) translateY(80px);" 
            data--1000-top="transform[bounce]: scale(1) translateY(10px);" 
            data--1500-top="transform[bounce]: scale(0.5) translateY(10px);">
            <img src="images/logo.png">
        </div>
</div>

当然，这不起作用，但你了解我想要实现的目标。

有没有人知道我怎么能够添加类，以便我的导航点在与它们相关的div滚动到时更改类。然后我想我想在div退出视图后删除'active'类。

感谢您的帮助。

Answer 1

<li class="home" data-center-top="@class:home active" data-center-bottom="@class:home active" data-anchor-target="#one" data-edge-strategy="reset">
    <a data-menu-top="0" href="#one">Home</a>
</li>

Skrollr - 滚动到站点的不同部分时更改导航类

1 个答案: