0

そこで、RootsTheme (Bootstrap を使用)、Wordpress (Joomla! バックグラウンドから)、および Pagodabox を試してきました。

これがその結果です: http://ajmalafif.com/

ただし、私が試した JavaScript ソリューションでは、ナビゲーション バーに既知の問題がいくつかあります。

ルート #1) Chris Coyier のスムーズ スクロール

現在、私のサイトはこれで運営されています。

何がうまくいかないか - 画面が小さい場合やブラウザのサイズが変更された場合、ナビゲーションは非常に高い高さでぎこちなく停止します (画面幅 > 1200px で -90px にオフセットするように設定されているため)。

機能 - 画像の次および前のリンク ボタンが機能します (mysite.com#link をクリックしても、ナビゲーション バー アンカーと画像リンク クリック アンカーの間で競合しません)。

コードの例: http://jsfiddle.net/ajmalafif/LvPUC/1/

ルート #2) ウィリアム・マロの getElementbyId

私は最初にこのソリューションを気に入って使用しました。

何が機能しないか - オフセット ソリューションがないため、h1 タイトルで直接停止し、そのビューをブロックします。-bootstrap-carousel.js と競合します。画像カルーセルをクリックすると、画面/ナビゲーション バーが移動し、画像がブラウザーの上部に配置されます。

動作するもの - 任意のブラウザー サイズ (およびサイズ変更時) で動作し、それに応じてターゲット/到着します。

コードの例: http://jsfiddle.net/ajmalafif/bReUF/

--

ルート 1 が明確な勝者のように見えるかもしれませんが、現在私のサイトで実行されているものと同様に、特に iPad 内で表示する場合に問題はほとんどありません。それで、これを機能させるために私が得ることができるポインタ/ヘルプはありますか;

  • href ターゲットは、ブラウザの幅に関係なく正確にオフセットされます (おそらく、差分ブラウザの幅に基づいて差分オフセットを設定するソリューションです)?、または

  • getElementbyId ソリューションを使用するときにオフセットする方法 (ルート #2 を参照) と、bootstrap-carousel.js と互換性を持たせる方法 (したがって、別の画像カルーセル # アンカー タグをクリックしても移動しません)?

ご心配いただきありがとうございます。

4

1 に答える 1

2

ブラウザの高さを計算し、その変数のスクロールを返すことができます。

こちらがデモです

var browH = $(window).height();
            //alert(browH);
    if ( browH < 500 ) {
      $(scrollElem).animate({scrollTop: targetOffset-80}, 800,function() { location.has = target;});
    }
    else if ( browH > 500 ) {
       $(scrollElem).animate({scrollTop: targetOffset-80}, 400,function() { location.has = target;});
    }
于 2012-07-04T09:53:05.490 に答える