javascript - 实现滚动 spy 偏移问题

Question

所以首先是这个问题:

红线应该位于 topicTimer0 上，而不是在其上方偏移。菜单使用以下代码设置在主体顶部(值得注意的是，这不是原始 html 的样子，而是在使用 jquery 添加元素之后的样子):

<div class="col s2 z-depth-2">
    <h3>timer</h3>
    <hr>
    <ul class="section table-of-contents">
        <li><a href="#topic0OnScreen" class="active"><h5>topicTimer0</h5></a>
            <ul></ul>
        </li>
        <li><a href="#topic1OnScreen" class=""><h5>topicTimer1</h5></a>
            <ul></ul>
        </li>
        <li><a href="#topic2OnScreen" class=""><h5>topicTimer2</h5></a>
            <ul></ul>
        </li>
    </ul>
</div>

这是原始 html 的样子:

<div class="col s2 z-depth-2">
    <h3>timer</h3>
    <hr>
    <ul class="section table-of-contents">
    </ul>
</div>

这是处于这种状态的 JSFiddle:( https://jsfiddle.net/u1owwv9p/ ) 现在应该在 JSFIddle 上注意到它添加了一些额外的问题，例如向列表添加新的 topicTimer 并添加另一个主题 header 位于底部，但这些问题在实际程序中不会出现，唯一出现的就是我所说明的问题。

如果需要，这里是我在这里所做的文档的链接:( http://materializecss.com/scrollspy.html )。

Answer 1

这严格来说是css问题。为了使这两个元素相对于彼此居中，它们需要具有相同的高度:

设置 height <a>的元素以匹配 <h5> 的元素元素是一种解决方案[materialize.min.css:13]:

.table-of-contents a {
   height: 110%
}

我建议操纵 height , line-height和font-size <a> 的值和<h5>元素，以更好地理解它们的依赖关系，并希望找到最适合您需求的设置。