实现scrollspy偏移问题

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并添加另一个主题头最底层，但这些问题没有出现在实际的程序中，唯一能做的就是我所说的。

如果这里需要的是我在此处所做文章的链接：（http://materializecss.com/scrollspy.html）。

Answer 1

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

将height元素的<a>设置为与<h5>元素的.table-of-contents a { height: 110% } 匹配是一个解决方案 [materialize.min.css：13] ：< / p>

height

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