BinaryDevelop
  1. ホーム
  2. twitter-bootstrap

[解決済み] BootstrapでScrollSpyのオフセットを設定するにはどうすればよいですか？

2022-12-10 12:53:58

質問

ナビバーが上に固定され、メインコンテンツ領域の下に3つのdivがあるサイトがあります。

bootstrapフレームワークのscrollspyを使おうとしています。

私は、divを越えてスクロールしたときに、メニューの異なる見出しを強調することに成功しています。

私はまた、あなたがメニューをクリックしたとき、それはページの正しい部分にスクロールするように持っています。しかし はオフセットが正しくありません。 (ナビバーを考慮に入れていないので、約40ピクセルオフセットする必要があります。）

私は ブートストラップ・ページ を見ると、オフセットのオプションがあるようですが、使い方がよくわかりません。

でscrollspyを使えると書いてあるのも意味がわかりません。 $('#navbar').scrollspy() と書いてあるのも意味がわかりません。

オフセットは、もしかしたら data-offset='10' をbodyタグの上に置いたのですが、これでは何もできません。

これは本当に明白なことで、私がそれを見逃しているだけであるような気がしています。何か良い方法はないでしょうか？

私のコードは 

...
<!-- note: the data-offset doesn't do anything for me -->
<body data-spy="scroll" data-offset="20">
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
    <div class="container">
    <a class="brand" href="#">VIPS</a>
    <ul class="nav">
        <li class="active">
             <a href="#trafficContainer">Traffic</a>
        </li>
        <li class="">
        <a href="#responseContainer">Response Times</a>
        </li>
        <li class="">
        <a href="#cpuContainer">CPU</a>
        </li>
      </ul>
    </div>
</div>
</div>
<div class="container">
<div class="row">
    <div class="span12">
    <div id="trafficContainer" class="graph" style="position: relative;">
    <!-- graph goes here -->
    </div>
    </div>
</div>
<div class="row">
    <div class="span12">
    <div id="responseContainer" class="graph" style="position: relative;">
    <!-- graph goes here -->
    </div>
    </div>
</div>
<div class="row">
    <div class="span12">
    <div id="cpuContainer" class="graph" style="position: relative;">
    <!-- graph goes here -->
    </div>
    </div>
</div>
</div>

...
<script src="assets/js/jquery-1.7.1.min.js"></script>
<script src="assets/js/bootstrap-scrollspy.js"></script>
</body>
</html>

どのように解決するのですか？

Bootstrapはオフセットを使ってスパイリングのみを解決し、スクロールは解決しません。つまり、適切な場所へのスクロールはあなた次第です。

これを試してみてください、私の場合はうまくいきました: ナビゲーションがクリックされたときのイベント ハンドラを追加します。 

var offset = 80;

$('.navbar li a').click(function(event) {
    event.preventDefault();
    $($(this).attr('href'))[0].scrollIntoView();
    scrollBy(0, -offset);
});

ここで見つけた https://github.com/twitter/bootstrap/issues/3316

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します