3

同じページの特定の場所を読み込もうとしています。だから私はこのコードとその仕事をうまく使います。ここではJSFIDDLEです。

<div class="header">This is Header</div>
<div id="nav" class="clearfix">
<a href="#headline1">1</a>
<a href="#headline2">2</a>
<a href="#headline3">3</a>
<a href="#headline4">4</a>
</div>
<div class="section">
<h1><a name="headline1">Headline One</a></h1>
<p>Lorem ipsum dolor sit amet...</p>
</div>

<div class="section">
<h1><a name="headline2">Headline Two</a></h1>
<p>Lorem ipsum dolor sit amet...</p>
</div>

<div class="section">
<h1><a name="headline3">Headline Three</a></h1>
<p>Lorem ipsum dolor sit amet...</p>
</div>

<div class="section">
<h1><a name="headline4">Headline Four</a></h1>
<p>Lorem ipsum dolor sit amet...</p>
</div>

しかし問題は、ヘッダーが位置の上に固定されていることです。リンクをクリックすると1、Headline oneヘッダーに戻ります。したがって、h1コンテンツは表示されません。

このFiddleにアクセスしてください。私が言おうとしていることは理解できます。
ご協力ありがとうございました。

4

1 に答える 1

3

簡単な方法: 「name」要素にパディングを使用して、ヘッダーに対抗します。

http://jsfiddle.net/sAdK5/3/を参照

.section h1 a {
    display:block;
    padding-top:100px;
}

より複雑な方法: すべてのコンテンツを div コンテナー内に配置し、CSS でインライン スクロールを作成します。

jQuery を使用して余分なスクロールを追加することもできます。

参照: http://jsfiddle.net/sAdK5/11/

#content 領域内にスクロールバーを作成し、ウィンドウの高さからヘッダーを引いたものを測定し、ウィンドウのサイズ変更ごとにそれを呼び出します。

$(document).ready(function(){  
   resizeContent();
  //attach on resize event
   $(window).resize(function() {
       resizeContent();
    });
});
function resizeContent()
{
  //#content height equals window height minus .header height
   $('#content').css('height', $(window).height() - $('.header').height());
}
于 2012-10-19T11:12:14.173 に答える