0

我想创建导航，因为它显示在页面http://kiskolabs.com/

我已经创建了粘性菜单，但是问题始于在菜单中标记活动元素。

问题是：

如何检测页面是否滚动到特定 ID？

假设我有一些像这样的标题。

<h1 id="whatisit">What is it</h1>
<h1 id="desc">Description</h1>
<h1 id="faq">FAQ</h1>

和菜单

<nav>
  <a href="#whatisit">What is it</a>
  <a href="#desc">Description</a>
  <a href="#faq">FAQ</a>
</nav>

当页面滚动到这个元素时，我想要突出显示菜单（添加类或其他）。

我已经发现如何在这个线程中将元素滚动到特定的 ID，但我不知道如何检测现在的 id。页面大小是动态的，可能会在内容期间发生变化。所以我想到的绝对解决方案很糟糕。

到目前为止，我滚动得到了什么：

$("nav a").click(function (){
   $("html, body").animate({ scrollTop: $($(this).attr('href')).offset().top }, 1000);
});

我也找到了这个解决方案 ，但也许有更好的方法来实现它？

编辑

这个问题与版主建议的问题不重复。此外，该问题没有公认的答案。我的问题有点高级。

4

2 回答 2

0

在互联网上大量尝试和寻找解决方案的过程中，我解决了我的问题。

我使用了看起来很容易使用的航点插件。该插件可以在这里下载。

菜单的html代码：

        <nav>
            <a href="#whatisit" class="scrollable">....</a>
            <a href="#howworks"  class="scrollable">....</a>
            <a href="#whydata" class="scrollable" >....</a>
            <a href="#spec"  class="scrollable">...</a>
        </nav>

和要滚动页面的标题的html代码：

<h2 class="scrollable" id="whatisit">...</h2>
<h2 class="scrollable" id="spec">...</h2>

Jquery 代码 使页面在#id 与a href属性相同的特定元素上滚动。

$("nav a.scrollable").click(function (){
    var elementClickedHref = $(this).attr('href');
    $('html, body').animate({
                scrollTop: $(elementClickedHref).offset().top-100
                 }, 2000);  
    return false;
});

要更改滚动后当前处于活动状态的元素的颜色，我使用了航点插件。下面的代码查找h2哪个是可滚动的并获取它的 id。然后找到哪些可滚动的链接也与元素href的 id 相同a，并将活动类添加到此 id 并从非活动元素中删除活动类。

$('h2.scrollable').waypoint(function() {
    var idToCheck = '#' + $(this).attr('id');
    $('a.scrollable').removeClass('active');
    $('a.scrollable[href="'+idToCheck+'"]').addClass('active');
}, {
    offset: '100%'
});

它可以按照我的意愿完美运行。我希望这个解决方案能帮助那些将面临这样的问题的人。

于 2013-06-06T12:04:52.697 回答
0

您可以使用动画回调函数：

$("nav a").click(function () {
    $("html, body").animate({
        scrollTop: $(this.href).offset().top
    }, 1000, function () {
        $(this).addclass('scrolled').siblings('h1').removeClass('scrolled');
    });
});
于 2013-06-05T11:30:36.890 回答