3

私の Rails アプリケーションでは、トピックをクリックするとその質問に移動するサイドバーを持つ単純な FAQ ページを構築しようとしています。

したがって、サイドバーのコードの一部は次のようになります。

<li><a href="#work">How does it work?</a></li>

そして、id="work" と一致する h2 があります。

Bootstrap の navbar によって隠されているページの一番上から始まるコンテンツを表示しているためだと思います。これを改善する最善の方法は何ですか？

4

2 に答える 2

5

同じ問題がありました。これが私が思いついたものです：

// listen for click events originating from elements with href starting with #
$('body').on('click.scroll-adjust', '[href^="#"]', function (e) {
  var $nav

  // make sure navigation hasn't already been prevented
  if ( e && e.isDefaultPrevented() ) return

  // get a reference to the offending navbar
  $nav = $('div.navbar')

  // check if the navbar is fixed
  if ( $nav.css('position') !== "fixed" ) return

  // listen for when the browser performs the scroll
  $(window).one('scroll', function () {
    // scroll the window up by the height of the navbar
    window.scrollBy(0, -$nav.height())
  });

});
于 2012-08-04T01:10:40.307 に答える
1

私はこれを純粋に CSS/HTML マークアップで修正しました。構造によっては、これが機能する場合と機能しない場合があります。

まず、Navbar で参照しているすべての要素は div です。ページはセクションに分割されており、各 dav にはクラスcontainerがあるため、ページ構造は次のようになります。

<body>
 <div class="navbar navbar-fixed-top">
   <div class="navbar-inner">
     <div class="container">  
       <ul class="nav">
         <li class="active"><a href="#one">one</a></li>
         <li><a href="#two">two</a></li>
         <li><a href="#three">three</a></li>
         <li><a href="#four">four</a></li>
         <li><a href="#five">five</a></li>
       </ul>
     </div>
   </div>
 </div>

 <div class="container" id="one">  
   <h1>One</h1>
 </div>

 ...

 <div class="container" id="five">  
   <h1>Five</h1>
 </div>

ドキュメントでは、ナビゲーション バーを補うために少なくとも 40 ピクセルのボディをパディングすることが推奨されていますが、これは問題ありませんが、ページが上部にある場合にのみコンテンツが押し下げられます。あなたが行ったように、静的なナビゲーション バーからページ上の#アンカーへのリンクがページの上に高すぎることがわかりました。

私の解決策は、アンカーされた各要素の上部を埋めることでした。そのため、次の CSS をページ CSS に追加しました (標準のブートストラップとレスポンシブ スタイルシートの間の読み込み)。

.container {
  padding-top:  60px;
}

これにより、ページの各セクション間にスペースが追加されることは明らかですが、これは実際にはレイアウトに役立ちます。

<body>トップ セクションにもこのパディングがあるため、タグの上部にパディングを適用する必要がないことに注意してください。

于 2012-11-26T14:23:09.347 に答える