基本示例
它成功使用必须具备下面三个条件
- 它必须用于 Bootstrap导航组件或列表组。
- 需要给监听的元素添加上
position: relative作用到body效果最好 - Anchors( <a> ) 是必需的，并且必须指向带有它的元素id。
First heading
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci alias atque consequuntur debitis delectus et excepturi expedita fugit ipsa modi possimus qui quibusdam, recusandae reiciendis sequi suscipit vero vitae voluptates? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci alias atque consequuntur debitis delectus et excepturi expedita fugit ipsa modi possimus qui quibusdam, recusandae reiciendis sequi suscipit vero vitae voluptates? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci alias atque consequuntur debitis delectus et excepturi expedita fugit ipsa modi possimus qui quibusdam, recusandae reiciendis sequi suscipit vero vitae voluptates? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci alias atque consequuntur debitis delectus et excepturi expedita fugit ipsa modi possimus qui quibusdam, recusandae reiciendis sequi suscipit vero vitae voluptates? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci alias atque consequuntur debitis delectus et excepturi expedita fugit ipsa modi possimus qui quibusdam, recusandae reiciendis sequi suscipit vero vitae voluptates? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci alias atque consequuntur debitis delectus et excepturi expedita fugit ipsa modi possimus qui quibusdam, recusandae reiciendis sequi suscipit vero vitae voluptates?
Second heading
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci alias atque consequuntur debitis delectus et excepturi expedita fugit ipsa modi possimus qui quibusdam, recusandae reiciendis sequi suscipit vero vitae voluptates? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci alias atque consequuntur debitis delectus et excepturi expedita fugit ipsa modi possimus qui quibusdam, recusandae reiciendis sequi suscipit vero vitae voluptates? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci alias atque consequuntur debitis delectus et excepturi expedita fugit ipsa modi possimus qui quibusdam, recusandae reiciendis sequi suscipit vero vitae voluptates? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci alias atque consequuntur debitis delectus et excepturi expedita fugit ipsa modi possimus qui quibusdam, recusandae reiciendis sequi suscipit vero vitae voluptates? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci alias atque consequuntur debitis delectus et excepturi expedita fugit ipsa modi possimus qui quibusdam, recusandae reiciendis sequi suscipit vero vitae voluptates? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci alias atque consequuntur debitis delectus et excepturi expedita fugit ipsa modi possimus qui quibusdam, recusandae reiciendis sequi suscipit vero vitae voluptates?
Third heading
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci alias atque consequuntur debitis delectus et excepturi expedita fugit ipsa modi possimus qui quibusdam, recusandae reiciendis sequi suscipit vero vitae voluptates? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci alias atque consequuntur debitis delectus et excepturi expedita fugit ipsa modi possimus qui quibusdam, recusandae reiciendis sequi suscipit vero vitae voluptates? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci alias atque consequuntur debitis delectus et excepturi expedita fugit ipsa modi possimus qui quibusdam, recusandae reiciendis sequi suscipit vero vitae voluptates? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci alias atque consequuntur debitis delectus et excepturi expedita fugit ipsa modi possimus qui quibusdam, recusandae reiciendis sequi suscipit vero vitae voluptates? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci alias atque consequuntur debitis delectus et excepturi expedita fugit ipsa modi possimus qui quibusdam, recusandae reiciendis sequi suscipit vero vitae voluptates? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci alias atque consequuntur debitis delectus et excepturi expedita fugit ipsa modi possimus qui quibusdam, recusandae reiciendis sequi suscipit vero vitae voluptates?
Fourth heading
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci alias atque consequuntur debitis delectus et excepturi expedita fugit ipsa modi possimus qui quibusdam, recusandae reiciendis sequi suscipit vero vitae voluptates? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci alias atque consequuntur debitis delectus et excepturi expedita fugit ipsa modi possimus qui quibusdam, recusandae reiciendis sequi suscipit vero vitae voluptates? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci alias atque consequuntur debitis delectus et excepturi expedita fugit ipsa modi possimus qui quibusdam, recusandae reiciendis sequi suscipit vero vitae voluptates? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci alias atque consequuntur debitis delectus et excepturi expedita fugit ipsa modi possimus qui quibusdam, recusandae reiciendis sequi suscipit vero vitae voluptates? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci alias atque consequuntur debitis delectus et excepturi expedita fugit ipsa modi possimus qui quibusdam, recusandae reiciendis sequi suscipit vero vitae voluptates? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci alias atque consequuntur debitis delectus et excepturi expedita fugit ipsa modi possimus qui quibusdam, recusandae reiciendis sequi suscipit vero vitae voluptates?
Fifth heading
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci alias atque consequuntur debitis delectus et excepturi expedita fugit ipsa modi possimus qui quibusdam, recusandae reiciendis sequi suscipit vero vitae voluptates? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci alias atque consequuntur debitis delectus et excepturi expedita fugit ipsa modi possimus qui quibusdam, recusandae reiciendis sequi suscipit vero vitae voluptates? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci alias atque consequuntur debitis delectus et excepturi expedita fugit ipsa modi possimus qui quibusdam, recusandae reiciendis sequi suscipit vero vitae voluptates? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci alias atque consequuntur debitis delectus et excepturi expedita fugit ipsa modi possimus qui quibusdam, recusandae reiciendis sequi suscipit vero vitae voluptates? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci alias atque consequuntur debitis delectus et excepturi expedita fugit ipsa modi possimus qui quibusdam, recusandae reiciendis sequi suscipit vero vitae voluptates? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci alias atque consequuntur debitis delectus et excepturi expedita fugit ipsa modi possimus qui quibusdam, recusandae reiciendis sequi suscipit vero vitae voluptates?
和嵌套导航一起使用
Item 1
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab assumenda consequatur, dolor esse labore maxime minus nihil officiis optio perferendis praesentium, ut? Consequuntur culpa debitis error est explicabo maiores quibusdam!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab assumenda consequatur, dolor esse labore maxime minus nihil officiis optio perferendis praesentium, ut? Consequuntur culpa debitis error est explicabo maiores quibusdam!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab assumenda consequatur, dolor esse labore maxime minus nihil officiis optio perferendis praesentium, ut? Consequuntur culpa debitis error est explicabo maiores quibusdam!
Item 1-1
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab assumenda consequatur, dolor esse labore maxime minus nihil officiis optio perferendis praesentium, ut? Consequuntur culpa debitis error est explicabo maiores quibusdam!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab assumenda consequatur, dolor esse labore maxime minus nihil officiis optio perferendis praesentium, ut? Consequuntur culpa debitis error est explicabo maiores quibusdam!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab assumenda consequatur, dolor esse labore maxime minus nihil officiis optio perferendis praesentium, ut? Consequuntur culpa debitis error est explicabo maiores quibusdam!
Item 1-2
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab assumenda consequatur, dolor esse labore maxime minus nihil officiis optio perferendis praesentium, ut? Consequuntur culpa debitis error est explicabo maiores quibusdam!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab assumenda consequatur, dolor esse labore maxime minus nihil officiis optio perferendis praesentium, ut? Consequuntur culpa debitis error est explicabo maiores quibusdam!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab assumenda consequatur, dolor esse labore maxime minus nihil officiis optio perferendis praesentium, ut? Consequuntur culpa debitis error est explicabo maiores quibusdam!
Item 2
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab assumenda consequatur, dolor esse labore maxime minus nihil officiis optio perferendis praesentium, ut? Consequuntur culpa debitis error est explicabo maiores quibusdam!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab assumenda consequatur, dolor esse labore maxime minus nihil officiis optio perferendis praesentium, ut? Consequuntur culpa debitis error est explicabo maiores quibusdam!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab assumenda consequatur, dolor esse labore maxime minus nihil officiis optio perferendis praesentium, ut? Consequuntur culpa debitis error est explicabo maiores quibusdam!
Item 3
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab assumenda consequatur, dolor esse labore maxime minus nihil officiis optio perferendis praesentium, ut? Consequuntur culpa debitis error est explicabo maiores quibusdam!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab assumenda consequatur, dolor esse labore maxime minus nihil officiis optio perferendis praesentium, ut? Consequuntur culpa debitis error est explicabo maiores quibusdam!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab assumenda consequatur, dolor esse labore maxime minus nihil officiis optio perferendis praesentium, ut? Consequuntur culpa debitis error est explicabo maiores quibusdam!
Item 3-1
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab assumenda consequatur, dolor esse labore maxime minus nihil officiis optio perferendis praesentium, ut? Consequuntur culpa debitis error est explicabo maiores quibusdam!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab assumenda consequatur, dolor esse labore maxime minus nihil officiis optio perferendis praesentium, ut? Consequuntur culpa debitis error est explicabo maiores quibusdam!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab assumenda consequatur, dolor esse labore maxime minus nihil officiis optio perferendis praesentium, ut? Consequuntur culpa debitis error est explicabo maiores quibusdam!
Item 3-2
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab assumenda consequatur, dolor esse labore maxime minus nihil officiis optio perferendis praesentium, ut? Consequuntur culpa debitis error est explicabo maiores quibusdam!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab assumenda consequatur, dolor esse labore maxime minus nihil officiis optio perferendis praesentium, ut? Consequuntur culpa debitis error est explicabo maiores quibusdam!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab assumenda consequatur, dolor esse labore maxime minus nihil officiis optio perferendis praesentium, ut? Consequuntur culpa debitis error est explicabo maiores quibusdam!
和列表组一起使用
Item 1
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias atque corporis cum delectus, dolore dolores eum fuga id incidunt, ipsam iste laborum nihil porro quos sint sunt suscipit, velit voluptatibus.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias atque corporis cum delectus, dolore dolores eum fuga id incidunt, ipsam iste laborum nihil porro quos sint sunt suscipit, velit voluptatibus.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias atque corporis cum delectus, dolore dolores eum fuga id incidunt, ipsam iste laborum nihil porro quos sint sunt suscipit, velit voluptatibus.
Item 2
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias atque corporis cum delectus, dolore dolores eum fuga id incidunt, ipsam iste laborum nihil porro quos sint sunt suscipit, velit voluptatibus.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias atque corporis cum delectus, dolore dolores eum fuga id incidunt, ipsam iste laborum nihil porro quos sint sunt suscipit, velit voluptatibus.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias atque corporis cum delectus, dolore dolores eum fuga id incidunt, ipsam iste laborum nihil porro quos sint sunt suscipit, velit voluptatibus.
Item 3
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias atque corporis cum delectus, dolore dolores eum fuga id incidunt, ipsam iste laborum nihil porro quos sint sunt suscipit, velit voluptatibus.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias atque corporis cum delectus, dolore dolores eum fuga id incidunt, ipsam iste laborum nihil porro quos sint sunt suscipit, velit voluptatibus.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias atque corporis cum delectus, dolore dolores eum fuga id incidunt, ipsam iste laborum nihil porro quos sint sunt suscipit, velit voluptatibus.
Item 4
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias atque corporis cum delectus, dolore dolores eum fuga id incidunt, ipsam iste laborum nihil porro quos sint sunt suscipit, velit voluptatibus.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias atque corporis cum delectus, dolore dolores eum fuga id incidunt, ipsam iste laborum nihil porro quos sint sunt suscipit, velit voluptatibus.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias atque corporis cum delectus, dolore dolores eum fuga id incidunt, ipsam iste laborum nihil porro quos sint sunt suscipit, velit voluptatibus.