文章/答案/技术大牛

发布

社区首页 >问答首页 >在滚动和单击时更改导航文本颜色

问在滚动和单击时更改导航文本颜色
EN

Stack Overflow用户

提问于 2017-02-07 12:23:37

回答 1查看 767关注 0票数 2

在一个具有不同ids的页面上，我有不同的div部分。示例：

<section>
    <div id="first"></div>
</section>

<section>
    <div id="second"></div>
</section>

<section>
    <div id="third"></div>
</section>

我有一个水平导航，例如：

<div class="nav">
    <ut>
        <li><a href="#first">First</a></li>
        <li><a href="#second">Second</a></li>
        <li><a href="#third">Third</a></li> 
    </ul>
</div>

我想要的是：

当我向下滚动到不同的部分时，导航文本的颜色应该会改变。例如，如果我向下滚动到<div id="second"></div>，那么<li><a href="#second">Second</a></li>的颜色应该会改变。
如果我点击任何一个导航链接，我马上跳到那个特定的部分。导航文本的颜色也应该改变。
当我点击任何一个导航，跳转到一个特定的部分，它突然出现，没有任何影响。我想在单击时添加一个slideUp类型的jquery效果。

请帮我发展一下。

jquery

html

css

javascript

php

回答 1

Stack Overflow用户

发布于 2017-02-07 14:04:53

我找到了答案的解决办法。下面的代码可以完成所有操作。它从URL中更改#id，并据此更改导航字体的颜色。

代码：

$(document).bind('scroll',function(e){
    $('div').each(function(){
        if ($(this).offset().top < window.pageYOffset + 10 && $(this).offset().top + $(this).height() > window.pageYOffset + 10){
            window.location.hash = $(this).attr('id');

            if($(this).attr('id') == "first"){
                $("#navlist a").css('color', 'white');
                $("#nav1").css('color', 'red');
            }else if($(this).attr('id') == "second"){
                $("#navlist a").css('color', 'white');
                $("#nav2").css('color', 'red');
            }else if($(this).attr('id') == "third"){
                $("#navlist a").css('color', 'white');
                $("#nav3").css('color', 'red');
            }

        }
    });
});

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/42089851

复制

相似问题

问在滚动和单击时更改导航文本颜色
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在滚动和单击时更改导航文本颜色EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在滚动和单击时更改导航文本颜色
EN