Question

在我的网站上，我有一个带有几个不同导航项的粘性标题，点击它时会向下滚动以在页面上找到该部分。我想知道如何设置它，以便当视图在它对应的部分时导航项改变颜色。换句话说，如果观看者在“x”部分，导航栏上的“x”将改变颜色。

更新：继承人使用

导航栏的代码

<div class = 'nav-container'>
    <nav>
        <div id = 'nav-items-container'>
            <ul class='nav-items'>
                <li class='nav-item'><a href='#what'>what</a></li>
                <li class='nav-item'><a href='#how'>how</a></li>
                <li class='nav-item'><a href='#why'>why</a></li>
                <li class='nav-item'><a href='#who'>who</a></li>
                <li class='nav-item'><a href='#where'>where</a></li>
            </ul>
        </div>
    </nav>
</div>

一些css

.nav-container{
   background-color:black;
   height:50px;
   width:410px;
   font-size: 120%;
   position:absolute;
}



a:link{
    color:white;
}

a:visited{
    color:#58ACFA;
}
#nav-items-container ul li{
    display:inline;
}

#nav-items-container ul li a{
    padding: 20px;
    text-decoration:none;
}
#nav-items-container ul{
    margin:0;
    padding:0;
    list-style-type: none;
    text-align: center;
    padding-top:15px;
}

Answer 1

如果您可以使用jquery，您可以执行以下操作：

 <script type="text/javascript">
    $(function() {
        var sections = [],
            anchors = $('#nav-items-container a[href^="#"]'),  // anchor links with hash tags
            docHeight = $(document).height(),
            currentOffset,
            setNavActive;

        // handler to update the class  
        setNavActive = function(hash){
            anchors.removeClass('current-section');
            anchors.filter('a[href="' + hash + '"]').addClass('current-section');
        };

        // building our hash/start/end position map 
        $.each(anchors, function(i, item) {
            currentOffset = $(item.hash).offset().top;
            if (i > 0) {
                sections[i-1].end = currentOffset;
            }

            sections[i] = { 
                            hash: item.hash, 
                            start: (i == 0 ? 0 : currentOffset),
                            end: docHeight
                          };
        });

        // on scroll event, check which map fits, 
        // find the hash and set the class          
        $(document).scroll(function() {
            currentOffset = $(document).scrollTop();
            for (var i = 0; i < sections.length; i++) {
                if (sections[i].start <= currentOffset && sections[i].end > currentOffset) {
                    setNavActive(sections[i].hash);
                }
            }
        });
    });
</script>

我添加了一种新风格，但您可以将其嵌套或等等：

.current-section {background:pink; }

的jsfiddle

http://jsfiddle.net/fstreamz/krb6Q/3/

Answer 2

这里没有足够的信息来提供最佳答案。我可以给一个有效的。

张你的标题看起来像这样：

<li class='nav-item' id = "nav_what"><a href='#what'>what</a></li>
<li class='nav-item' id = "nav_how"><a href='#how'>how</a></li>
<li class='nav-item' id = "nav_why"><a href='#why'>why</a></li>
<li class='nav-item' id = "nav_who"><a href='#who'>who</a></li>
<li class='nav-item' id = "nav_where"><a href='#where'>where</a></li>

然后在每个页面的正文中

<script>
document.getElementById('nav_what').style.backgroundColor = "gray";
</script>

您必须使用正确的ID在每个页面上将其切换出来。如果不在外部加载标题，则传统上使用内联样式手动完成。

Answer 3

添加另一个CSS声明，并将active样式应用于当前页面。

#nav-items-container ul li.active a {
    color:red;
}

像这样应用上面的风格......

<li class='nav-item active'><a href='#what'>what</a></li>

jsFiddle Demo

标题上的导航项目根据部分更改

3 个答案:

的jsfiddle