如何创建“活动”项跟随页面内容位置的侧边菜单？

Question

我想学习如何做这个左侧菜单：http : //js.devexpress.com/New/15_2/#HTML_5_JS_Core 当你向下滚动页面时，“活动”菜单项会发生变化。

ps 这种菜单有名字吗？

问候， 亚尼夫

Answer 1

滚动导航

这就是我们如何称呼这些类型的导航栏。基本上，您必须侦听滚动事件并计算当前视口中的元素，而不是向导航添加一个标记当前菜单元素的类。

有一个用 jQuery 构建的不错的演示，但因为 jQuery 已成为过去，我用 Vanilla JS 构建了一个。请参阅注释以获取解释。

有不同的方法来定义哪个是当前元素。在我的示例中，它是顶行刚刚通过浏览器顶行的最后一个。

工作演示

window.onscroll = onScroll;

function onScroll() {
    var removeActiveClass = function (elements) {
        for (var i = 0; i < elements.length; ++i) {
            elements[i].classList.remove('active');
        }
    }
    var anchors = document.querySelectorAll('#menu-center a');
    var previousRefElement = null;
    for (var i = 0; i < anchors.length; ++i) {
        // Get the current element by the id from the anchor's href.
        var currentRefElement = document.getElementById(anchors[i].getAttribute('href').substring(1));
        var currentRefElementTop = currentRefElement.getBoundingClientRect().top;
        // Searching for the element whose top haven't left the top of the browser.
        if (currentRefElementTop <= 0) {
            //The browser's top line haven't reached the current element, so the previous element is the one we currently look at.
            previousRefElement = anchors[i];
            // Edge case for last element.
            if (i == anchors.length - 1) {
                removeActiveClass(anchors);
                anchors[i].classList.add("active");
            }
        } else {
            removeActiveClass(anchors);
            previousRefElement.classList.add("active");
            break;
        }
        
    }
}

body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
}
.menu {
    width: 100%;
    height: 75px;
    position: fixed;
    background-color:rgba(4, 180, 49, 0.6);
}
#menu-center {
    width: 980px;
    height: 75px;
    margin: 0 auto;
}
#menu-center ul {
    margin: 15px 0 0 0;
}
#menu-center ul li {
    list-style: none;
    margin: 0 30px 0 0;
    display: inline;
}
.active {
    font-size: 14px;
    color: #fff;
    text-decoration: none;
    line-height: 50px;
}
a {
    font-size: 14px;
    color: black;
    text-decoration: none;
    line-height: 50px;
}
.content {
    height: 100%;
    width: 100%;
}
#portfolio {background-color: grey;}
#about {background-color: blue;}
#contact {background-color: red;}

<div class="menu">
    <div id="menu-center">
        <ul>
            <li><a class="active" href="#home">Home</a></li>
            <li><a href="#portfolio">Portfolio</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
        </ul>
    </div>
</div>
<div id="home" class="content"></div>
<div id="portfolio" class="content"></div>
<div id="about" class="content"></div>
<div id="contact" class="content"></div>