開発の初期段階にあるブートストラップをテーマにした Web サイトを持っていますが、粘着性のあるナビゲーション バーから奇妙な動作が発生しています。Chrome で途中まで下にスクロールした後 (および Firefox で最初にスクロールするとき)、ナビゲーション バーが幅の半分に縮小します。誰かがこれの原因を考えることができますか?
この動作のデモは、http://studiomimo.comで見ることができます。
ありがとう!
開発の初期段階にあるブートストラップをテーマにした Web サイトを持っていますが、粘着性のあるナビゲーション バーから奇妙な動作が発生しています。Chrome で途中まで下にスクロールした後 (および Firefox で最初にスクロールするとき)、ナビゲーション バーが幅の半分に縮小します。誰かがこれの原因を考えることができますか?
この動作のデモは、http://studiomimo.comで見ることができます。
ありがとう!
affix と scrollspy の両方を使用しているようです。両方を一緒に使用する必要はないと思います。おそらくそれが問題の原因です。scrollspy だけを使用する方がよいでしょう。
これを行うには、body タグを次のように変更します。
<body data-spy="scroll" data-target=".navbar" data-offset-top="50">
次に、navbar div を次のように変更します。
<div class="navbar navbar-inverse navbar-fixed-top">
これにより、scrollspy を機能させながら、サイズ変更の問題が停止します。ただし、ナビゲーション バーを全幅より小さくしたい場合は、使用せずnavbar-fixed-top
、代わりにナビゲーション バーを自分で上部に固定して、次のようにすることをお勧めします。
@media (min-width: 481px) {
.navbar {
position: fixed;
z-index: 1030;
width: 80%;
margin: 20px auto;
}
}
ベースのCSSでnav-wrapper IDでこれを試してください
html
<nav id="nav-wrapper" class="navbar-default" role="navigation" data-spy="affix" data-offset-top="60">
CSS
#nav-wrapper.affix {
top: 0 !important;
width: 100% !important;
}
サイズ変更の問題が解決するはずです。