突出显示固定侧导航中的活动锚链接答案

【问题标题】：Highlighting Active Anchor Links in Stationary SIde Nav突出显示固定侧导航中的活动锚链接
【发布时间】：2015-02-19 17:56:41
【问题描述】：

我正在尝试对常见问题解答页面侧导航中的链接产生“活跃”效果，因此当用户滚动时，他们所在的部分会突出显示。我玩过几种不同的技术，但似乎没有任何效果。

我目前正在使用这个：

$('.sidenav li').click(function() {
    $('.sidenavlinks li').removeClass('highlight');
    $(this).addClass('highlight');
});

这是我目前所拥有的：jsfiddle

【问题讨论】：

那么你是想在盒子出现时添加一个类，还是通过一些点击动作，当前盒子被添加一个类？与您在此处展示的内容以及您的小提琴中的内容有所不同
废话，是的。当我认为它有更新时，它没有更新。我的错。

标签： jquery html css tags anchor

【解决方案1】：

类似的东西？

$('#firstlink').addClass('active');

$(window).scroll(function(){
    $('.active').each(function(){
        $(this).removeClass('active');
    });

    var scrollTop = $(window).scrollTop();
    
    // if (scrollTop > $("#fifth").position().top)
    if($(window).scrollTop() + $(window).height() == $(document).height()) 
        $('#fifthlink').addClass('active');
    else if (scrollTop > $("#fourth").position().top)
        $('#fourthlink').addClass('active');
    else if (scrollTop > $("#third").position().top)
        $('#thirdlink').addClass('active');
    else if (scrollTop > $("#second").position().top)
        $('#secondlink').addClass('active');
    else
        $('#firstlink').addClass('active');
});

#sidenav{
    float: left;
    position: fixed;
    height: 300px;
    width: 180px;
    border: 1px solid #c0914c;
}
.title{
    float: left;
    clear: both;
    text-decoration: none;
    padding: 5px;
    margin: 5px 0px;
    font-size: 20px;
    width: 170px;
    text-decoration: none;
}
.active{
    color: white;
    background-color: green;
}
#main{
    float: right;
    height: 800px;
    margin-top: 0px;
}
.maindiv{
    height: 200px;
    width: 250px;
    padding: 20px 10px;
    margin: 5px 0px;
}
#first{
    background-color: #444;
}
#second{
    background-color: #bcbc93;
}
#third{
    background-color: #de5546;
}
#fourth{
    background-color: #eeff56;
}
#fifth{
    background-color: #554467;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
    <div id="sidenav">
        <a href="#first"><span class="title" id="firstlink">Line One</span></a>
        <a href="#second"><span class="title" id="secondlink">Line Two</span></a>
        <a href="#third"><span class="title" id="thirdlink">Line Three</span></a>
        <a href="#fourth"><span class="title" id="fourthlink">Line Four</span></a>
        <a href="#fifth"><span class="title" id="fifthlink">Line Five</span></a>
            
        <div id="slidebg"></div>
    </div>
    <div id="main">
        <div id="first" class="maindiv"></div>
        <div id="second" class="maindiv"></div>
        <div id="third" class="maindiv"></div>
        <div id="fourth" class="maindiv"></div>
        <div id="fifth" class="maindiv"></div>
    </div>
    <div id="footer">
    </div>
</body>

【讨论】：