マテリアライズは、だからここで開始するオフセット問題

Question

をscrollspy問題は、次のとおりです。

赤い線が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です。

<h5>要素のものと一致する<a>要素のheight一の溶液ある[設定：それらは同じ高さを持っている必要があり、これらの二つの要素のためのために互いに対してセンタリングしますmaterialize.min.css：13]：

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

私は両方のheight、line-heightとfont-size値を操作することをお勧め<a>および<h5>要素を使用して、依存関係をより深く理解し、必要に応じて最適な設定を見つけることができます。