2017-10-16 14 views
0

私はブートストラップ4で1ページのサイトを構築しています。私は、メインナビゲーションと、弾丸付きのサイド "navbar"の両方にブートストラップスクロールスパイを適用したいと思います。私はメインのナビゲーションにスクロールスパイを適用しましたが、私はサイドバーでそれを行う方法を理解することはできません。またdata-target=".navbar"data-target="#bulletNav"に変更しても、再び動作しません。ここでjsfiddleです:事前に https://jsfiddle.net/2beqhxxe/スパイを複数のnavbarにスクロール

おかげで

応答がScrollspy.jsで、このコンポーネントは.navリンクまたは.LISTグループ項目のクラスを持っている「ターゲット」にのみリンクを取り扱うれる

答えて

1

(以下の有罪コード;-)参照)。それが動作https://jsfiddle.net/airpanda50/7ymL4f11/

const Selector = { 
    DATA_SPY  : '[data-spy="scroll"]', 
    ACTIVE   : '.active', 
    NAV_LIST_GROUP : '.nav, .list-group', 
    NAV_LINKS  : '.nav-link', 
    LIST_ITEMS  : '.list-group-item', 
    DROPDOWN  : '.dropdown', 
    DROPDOWN_ITEMS : '.dropdown-item', 
    DROPDOWN_TOGGLE : '.dropdown-toggle' 
} 
+0

感謝を:あなたが望むように はここで、複数のscrollspyためjsfiddleソリューションです。私が気づいたもう一つの問題は、コンタクト(最後のリンク)がアクティブで始まり、スクロールすると実際のアクティブなリンクがマークされていることです。 –

+0

はい、私も気づいていますが、javascriptのセクションタグdocument.readyそのため、scrollspyが開始されると、すべてのセクションが空になり、高さが0になります。 - すべてのjavascript命令を無効にする - CSSでセクションを追加:{height:100vh;} セクションタグは、ページが読み込まれたときに高さを持つようになりました。 –

+0

ありがとうございました –

関連する問題