css - 将导航按钮与内容同步 (CSS3)

Question

想象一下下面的文字...

<h2 id="intro">Introduction</h2>
<p>Hello World</p>

<h2 id="summary">Summary</h2>
<p>Summary</p>

想象一下链接到标题的侧边栏......

<nav>
  <ul>
    <li><a href="#intro">Introduction</a></li>
    <li><a href="#summary">Summary</a></li>
  </ul>
</nav>

有谁知道如何将内容与导航链接同步，以便当用户向下滚动到简介时第一个链接突出显示，而当您向下滚动到摘要时第二个链接突出显示？

你可以看到一个例子@ http://html5up.net/prologue

我一直在研究代码，但无法弄清楚它是如何完成的。另外，我暂时采用了 Bootstrap，而上面的链接是另一个程序。

Answer 1

如果你想使用 javascript(jquery) 你可以试试这个，现在 css3 还不完全支持 mybe 将来。

$('nav a[href*=#]').on("click", function (e) {
    e.preventDefault();

    var id = $(this).attr('href');
    var scrollTo = $(id).offset().top;
     
    $(this).parent("li").addClass("active").siblings("li").removeClass("active");
    
    $('html,body').animate({
        'scrollTop': scrollTo
    }, 300);
});
window.addEventListener("scroll",highlighting, false);

function highlighting() {
    var currentPosition = $(this).scrollTop();
    console.log(currentPosition);
    $('nav a[href*=#]').removeClass('active');
    $('h2').each(function () {
        var headerStart = $(this).offset().top;
        var headerEnd = headerStart + $(this).height(); 
      
        if (currentPosition >= headerStart  && currentPosition < headerEnd) {
           
            $('a[href=#' + $(this).attr('id') + ']').addClass('active');
        }
    });
}

* {
    box-sizing:border-box;
    margin: 0;
    padding:0
}
nav {
    position: fixed;
    list-style: none;
    right: 0px;
    top: 50%;
    transform: translateY(-50%);
    width: 140px
}
.active {
    background-color: yellow;
}

[id=intro] {
    height: 400px
}
[id=summary] {
    height: 960px
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2 id=intro>Introduction</h2>
<p>Hello World</p>

<h2 id=summary>Summary</h2>
<p>Summary</p>

<nav>
  <ul>
    <li><a href="#intro">Introduction</a></li>
    <li><a href="#summary">Summary</a></li>
  </ul>
</nav>

解决此问题的更好方法是将它们包装在 OP 提供的页面上的部分中，并将 id 传递给这些部分，如下所示:

<section  id=intro>
    <h2>Introduction</h2>
    <p>Hello World</p>
</section>
<section  id=summary>
    <h2>Summary</h2>
    <p>Summary</p>
</section> 

现在有了标准HTML5 structural elements你需要把它包装在 main element 中

<main>

    <section  id=intro>
        <h2>Introduction</h2>
        <p>Hello World</p>
    </section>
    <section  id=summary>
        <h2>Summary</h2>
        <p>Summary</p>
    </section> 

</main>

将每个部分设置为全宽 width: 100% 。

祝你好运!