レシポンシブのサイトで面幅が大きいときは上部固定で追従してくるメニュー、画面幅が小さくなると上部にメニューを固定の場合。同じアンカーでは停止した時の画面位置が違ってくるのでその時の対応。
CSSとJSのやり方があるようだけど、簡単そうなCSSで調整。
<h1> <span id=“no1” class=“anchorlink"></span>タイトル</h1>アンカーをつけたい場所にspanで挿入。
@media only screen and (min-width:760px){
span.anchorlink {
position: relative;
top: -120px;
display: block;
}
}
上部メニューが表示されるサイズを指定して、上部にメニューが表示されているときはアンカーの要素を上方にずらすようにする。
