6

私のページには固定のトップ ナビゲーション バーがあり、ページ上にいくつかの id 要素があります。これらの id 要素のいずれかのリンクを押すと、この id が一番上にスクロールされますが、一番上のナビゲーション バーの下に隠されています。実際のページは非常に長く、さまざまな「ジャンプポイント」があります。

次のhtmlの問題を示すための単純化されたフィドルがあります

<div id="fixedbar">This is the fixed top bar</div>
<div id="toplinks"><a href="#first">First</a> <a href="#second">Second</a></div>
<p id="first"><strong>First</strong>
    Lorem ipsum dolor sit amet[...]
</p>
<p id="second"><strong>Second</strong>
    Duis autem vel eum iriure dolor[...]
</p>
<div id="bottomlinks"><a href="#first">First</a> <a href="#second">Second</a></div>

そしてこのcss

body{padding:0;margin:0}
#toplinks{padding-top:2em}
#fixedbar{
    position:fixed;
    background-color:#ccc;
    height:2em;
    width:100%
}

リンクをクリックすると、正しい要素にスクロールするが、固定ナビゲーション バーを補完する必要があります。考えられる解決策には、せいぜい css のみを含める必要がありますが、javascript または jquery を含めることができます (1.9 は実稼働環境で使用されます)。

助けてくれてありがとう！

4

3 に答える 3

10

この問題に対する JavaScript の回避策を次に示します。クリック イベントをトップリンクとボトムリンクにバインドし、クリック イベントでターゲットオフセットを<a>見つけて、 javascript を使用してスクロールします。<p>

$("#toplinks, #bottomlinks").on('click','a', function(event){ 
    event.preventDefault();
    var o =  $( $(this).attr("href") ).offset();   
    var sT = o.top - $("#fixedbar").outerHeight(true); // get the fixedbar height
    // compute the correct offset and scroll to it.
    window.scrollTo(0,sT);
});

フィドル: http://jsfiddle.net/AnmJY/1/

于 2013-02-28T15:54:54.557 に答える
1

変更されたJS：

 $("#toplinks a").click(function() {
    var id =  $(this).attr('href');
     $('html, body').animate({         
         scrollTop: $(id).offset().top-40
     }, 1000);
 });

変更されたCSS：

body{padding:0;margin:0}
#toplinks{padding-top:2em}
#fixedbar{
    position:fixed;
    background-color:#ccc;
    height:40px;
    width:100%
}

フィドル： http： //jsfiddle.net/xSdKr/

40（px）はメニューの高さ、1000はアニメーションを実行するためのミリ秒単位の時間です。

JSソリューションは、主にWebサイトのスタイルに干渉する可能性のある人工的なパディングなしで要素を所定の位置に保持するため、純粋なCSSよりもはるかにエレガントです。また、アニメーションも含まれています。通常、ページのコンテンツと正確な場所を簡単に追跡できるため、純粋なCSS/HTMLを使用したインスタフリップよりもスムーズな遷移の方がはるかに受け入れられます。欠点は、誰かが#firstURLで使用すると、メニューがヘッダーと重なって表示されることです。

于 2013-02-28T15:52:57.080 に答える
0

少しごまかすことができます。

http://jsfiddle.net/vyPkA/

body{padding:0;margin:0}
#toplinks{padding-top:2em; margin-bottom: -40px;}
#fixedbar{
    position:fixed;
    background-color:#ccc;
    height:2em;
    width:100%;
}
#first, #second{
    padding-top: 40px;
}
于 2013-02-28T15:48:33.640 に答える