【问题标题】:Javascript or jQuery to change navigation link class when scroll position is reached on main section当在主要部分达到滚动位置时,使用 Javascript 或 jQuery 更改导航链接类
【发布时间】:2012-03-15 11:32:18
【问题描述】:

我的页面是一个单页网站,其侧面有一个页面幻灯片导航,其 id 为“导航”。我的主要部分是一个完全流畅的 100% 宽设计,它只有在按下侧面的按钮以显示导航菜单时才会改变。在这个导航菜单上,我希望能够更改两个类之间的链接类,例如“活动”和“非活动”,我希望根据用户滚动的位置来改变它,即用户的位置在“about”的 div id 上滚动,我希望导航中链接到 about 的类具有“活动”类,其余链接为“非活动”。这将适用于每个链接。

我的网站是http://sandbox.modernturtle.com

任何帮助将不胜感激:)

【问题讨论】:

    标签: jquery class navigation scroll


    【解决方案1】:

    Twitter Bootstrap 有一个插件可以为你做这件事。这是一个演示:http://twitter.github.com/bootstrap/javascript.html#scrollspy

    编辑:
    像这样初始化插件:

    $('#navigation').scrollspy();
    

    然后在body标签中添加data-spy属性:

    <body data-spy="scroll" >...</body>
    

    最后(您的网站上已有此步骤),将导航链接的 href 与 div 的 id 匹配:

    <a href="#about" onclick="$.scrollTo( '#about', 1000, {easing:''} ); CngClass(this);" class="selected">about</a>
    
    <div id="about">
    

    【讨论】:

    • 嘿,这似乎是要走的路,但是,我不知道如何链接它,你介意帮我进一步吗? :)
    • 谢谢这位大佬,其实我前段时间就解决了,问题是改变'a'标签的类是行不通的,所以我不得不使用无组织的列表现在效果很好! :) 再次感谢伙计。
    猜你喜欢
    • 2012-12-19
    • 1970-01-01
    • 1970-01-01
    • 2016-09-30
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2019-08-02
    • 1970-01-01
    相关资源
    最近更新 更多