4

私はこのトピックがこことここの投稿でいくらかカバーされているのを見ましたが、それらは本当に私を助けません。ただし、状況はかなり似ています。ページの上部にスクロールページとスティッキーメニューバー（固定div）があり、長いスクロールテキストにアンカーポイントが散在しています。

このHTMLのようなもの：

<a name="hd1" class="anchor"><h1>Heading Foo</h1></a>
<p>this is some text, and a lot of it
...
<a href="#hd1">jump to Heading Foo</a>
...
<a name="hdx" class="anchor"><h1>Heading Bla</h1></a>
<p>and then there is more text
...
<a href="#hdx">jump to Heading Bla</a>    
...

私はまだこの問題を回避しているので、今のところ空のCSSがいくつかあります

.anchor {
  color: green;
} ​

このフィドルを見て、現時点でどのように機能するかを確認してください。

これで、リンクをクリックするたびにアンカーに移動します。（そうです！）残念ながら、これは、ページの上部にあるアンカーがスティッキーメニューで覆われていることも意味します。（いや！）スティッキーメニューの下に表示されるといいですね。

私は他の投稿で与えられた解決策を無駄に試しました。たとえば、アンカーの周囲にパディングを追加すると、実際にはテキストに表示可能なパディングが追加され、空のスペースが作成されます。それは私が望むものではありません。テキストは、視覚的に変更されずに表示される必要があります。

ヒントとヒントを事前に感謝します:-)

編集：もう少し明確にする必要があります。ページの上部にスペースは必要ありません。すべてのアンカーポイントをメニューバーの下に配置する必要があります。私のオリジナルのフィドルを試して、アンカーをクリックしてください。メニューバーで覆われるようにアンカーがどのように配置されているかがわかります。

4

6 に答える 6

1

最初のh1にパディングを設定するのはどうですか？

​h1:first-child {
    padding-top:50px;
}
于 2012-11-09T08:19:55.327 に答える
1

ご意見をお寄せいただきありがとうございます。この議論に基づいて、実用的な解決策を見つけました。そこからのヒントは「空のアンカー」でした。私の元のフィドルでは、アンカーが見出しを囲んでいたため、アンカーを配置できませんでした。

空のアンカーに変更する

<a name="hdx" class="anchor">&nbsp;</a><h1>Heading Bla</h1>

（表示されている）テキストフローに影響を与えることなく、ページ上のアンカーを移動できます。したがって、アンカーのCSSは次のようになります。

.anchor {
  position: relative;
  top: -35px;  /* depending on the size of the sticky menu */
}

このように、見出しのアンカーは見出しの上に配置され、そのアンカーにジャンプすると、見出しがメニューバーの下に表示されます。

正しく動作するようにフィドルを更新しました。（2つのこと：アンカーはA1、..テキストを使用して位置を示しますが、空にすることもできます。また、<p>「position：relative」が正常に機能するように、タグを明示的に閉じる必要がありました。）

于 2012-11-09T18:18:34.367 に答える
0

残りのデータを保持するコンテナdivを作成し、padding-top：50pxを設定します。

CSS：#contents {padding-top：50px;/*メニューの高さ*/}

HTML：

<div id="menu">Menu</div>
<div id="contents">
<!-- data goes here -->
</div>
于 2012-11-09T08:32:44.577 に答える
0

Javascriptを使用しwindow.scrollToて、ページを目的の場所までスクロールするのはどうですか？offsetTop要素のを見つけて、現在scrollXの値とoffsetTop +までスクロールします。ヘッダーの高さはどれくらいですか？

于 2012-11-09T08:34:35.057 に答える
0

追加の1つのクラスを追加し、そのマージントップ値を設定します

HTML

<div id="menu">Menu</div>
 <div class="nontop">
  //-- some thing here
</div>

Css

.nontop {
margin-top: 50px;
}

ここでDeml：フィドル

于 2012-11-09T08:40:04.167 に答える
0

ライブデモ このようにしたい。

margin-top:50px;メニューdivを除いて、すべてをコンテナdivに保持してdivを作成します。

于 2012-11-09T09:05:34.380 に答える