汉堡菜单导航栏的滚动监听事件的运用

来源于菜鸟教程

一、汉堡菜单

1.折叠的内容必须包裹在带有 class .collapse、.navbar-collapse 的

中。

2.折叠起来的导航栏实际上是一个带有 class .navbar-toggle 及两个 data- 元素的按钮。第一个是 data-toggle，用于告诉 JavaScript 需要对按钮做什么，第二个是 data-target，指示要切换到哪一个元素。

3.三个带有 class .icon-bar 的 创建所谓的汉堡按钮。

二、滚动监听事件

滚动监听（Scrollspy）插件，即自动更新导航插件，会根据滚动条的位置自动更新对应的导航目标。其基本的实现是随着您的滚动，基于滚动条的位置向导航栏添加 .active class。

1.向您想要监听的元素（通常是 body）添加 data-spy="scroll"。然后添加带有 Bootstrap .nav 组件的父元素的 ID 或 class 的属性 data-target（ id="myScrollspy"/data-toggle="#myScrollspy"/data-target=".bs-js-navbar-scrollspy"）。为了它能正常工作，您必须确保页面主体中有匹配您所要监听链接的 ID 的元素存在。

    

        

            

                
                
                    
                    切换导航
                    
                    
                    
                
                菜鸟教程
            
            

                

                    
iOS
                    
SVN
                
            
        
    


    
iOS
    .
    .   
    .
    .
    .
    .
    .
    .
    
SVN
    .............