Question

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

我目前正在使用它：

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

以下是我到目前为止的内容：jsfiddle

Answer 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>

突出固定SIde Nav中的活动锚链接

1 个答案: