1

さて、私の問題は、画面の上部に 115 ピクセルのスペースを占める固定ナビゲーション バーがあることです。セクションに「移動」すると、固定バーがセクションの一部を覆っています。私がする必要があるのは、スクロールするはずのセクションの上に約 130 ピクセル (ナビゲーション バー用に 115 ピクセルと、窮屈に見えないように少し余分なスペース) をスクロールすることです。

あなたがアイデアを得ることができるように、私は簡単で汚い JSFiddle をセットアップしました。

これでオフセットまたはオーバーを使用する必要があると思いますが、何もしていないようです:

$('#navigation a').click(function(){//$.scrollTo works EXACTLY the same way, but scrolls the whole screen
$.scrollTo( this.hash, 1500, {easing:'elasout'});
});

スクリプトを入手した場所と、役立つ場合の例を次に示します。

また、URL に追加される #hash リンクを削除して、過去の履歴があふれないようにしたいと考えています。ナビゲーション バーは固定されており、ナビゲーションの新しいリンクをクリックするだけでサイトの任意のセクションにアクセスできるため、それらはまったく必要ありません。しかし、それは主要な関心事ではありません。

助けに感謝します。

4

1 に答える 1

0

簡単な例！注：例のプラグインを使用していません-FirefoxとChromeでのみテスト済み

デモ: http://jsfiddle.net/6DTLc/4/

  $('ul#navigation').find('a').on('click', function(e) {
      var
      link_href =  $(this).attr('href'),   
      $linkElem =  $(link_href),
      $linkElem_scroll = $linkElem.get(0) && $linkElem.position().top-115;           

      $('html, body')
          .animate({scrollTop: $linkElem_scroll}, 'slow');         

        e.preventDefault();
    });
于 2012-08-26T05:43:54.227 に答える