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不完全支持。

＆＃13;

$('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');
        }
    });
}

＆＃13;

* {
    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
}

＆＃13;

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

＆＃13;

解决这个问题的一个更好的方法是将它们包装在 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%。

祝你好运！

导航按钮与内容同步（CSS3）

1 个答案: