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

怼烎@ 2022-03-29 03:48 203阅读 0赞

来源于菜鸟教程

一、汉堡菜单

1.折叠的内容必须包裹在带有 class **.collapse、.navbar-collapse** 的 <div> 中。

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

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

二、滚动监听事件

滚动监听（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 的元素存在。

<body data-spy="scroll" data-toggle="#myScrollspy">
    <div class="banner row"id="myScrollspy">
        <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
            <div class="container-fluid">
                <div class="navbar-header">
                    
                    <button type="button" class="navbar-toggle" data-toggle="collapse"
                            data-target="#example-navbar-collapse"
                            data-target=".bs-js-navbar-scrollspy">
                        
                        <span class="sr-only">切换导航</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="#home">菜鸟教程</a>
                </div>
                <div class="collapse navbar-collapse" id="example-navbar-collapse">
                    <ul class="nav navbar-nav">
                        <li><a href="#ios">iOS</a></li>
                        <li><a href="#svn">SVN</a></li>
                    </ul>
                </div>
            </div>
        </nav>
    </div>
    <div class="main" style="margin-top: 50px">
        <h4 id="ios">iOS</h4>
        .
        .   
        .
        .
        .
        .
        .
        .
        <h4 id="svn">SVN</h4>
        .............
    </div>

发表评论取消回复

表情：

评论列表（有 0 条评论，203人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue的滚动监听事件

scrollGet(e) { // 滚动条高度 e.srcElement.scrollTop, e.target.scrollTop

ゝ一纸荒年。/ 2022年12月18日 10:51/ 0 赞/ 270 阅读

相关侧边固定导航菜单监听滚动

jQuery实现的滚动侧边栏菜单，页面下滑时侧边栏会黏附在页面上，滚动版块时，对应菜单会点亮 PS：请注意避免包裹层因为float浮动的塌陷问题，建议使用\{overflow

喜欢ヅ旅行/ 2022年09月13日 05:23/ 0 赞/ 244 阅读

相关 Vue滚动监听导航栏样式变化，实现导航栏绑定内容锚点+滚动动画+vue-router

[https://www.jianshu.com/p/2ad8c8b5bf75][https_www.jianshu.com_p_2ad8c8b5bf75] <tem

柔情只为你懂/ 2022年09月10日 06:30/ 0 赞/ 247 阅读

相关 Vue 滚动导航栏固定(导航吸顶)

[Vue导航条吸顶效果 - 简书][Vue_ -] [https://www.cnblogs.com/nbwsj/p/12122689.html][https_www.cnb

痛定思痛。/ 2022年09月10日 06:30/ 0 赞/ 416 阅读

相关页面滚动的时候自动切换导航栏

解决方法: 页面主体设置相同的结构如: <body> <div class="items"></div> <div class="items"></div> <div

た入场券/ 2022年06月12日 07:15/ 0 赞/ 394 阅读

相关常用的导航栏下划线滚动特效

很多页面的导航栏经常会用到一些特效，今天直接也谢了一个常用的，就是鼠标移到那个栏目，下方的横线就会跟着划过去的一个过度效果，用了jq与css3的过度效果实现，接下来贴代码：

忘是亡心i/ 2022年06月09日 00:55/ 0 赞/ 316 阅读

相关监听滚动条事件

滚动条事件可以监听整个页面也可以监听某一div或者iframe，举例： //监听整个窗口的滚动条 window.onscroll = function()

迈不过友情╰/ 2022年06月07日 23:18/ 0 赞/ 672 阅读

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

来源于菜鸟教程一、汉堡菜单 1.折叠的内容必须包裹在带有 class .collapse、.navbar-collapse 的 <div> 中。 2.折叠起来的导航栏实

怼烎@/ 2022年03月29日 03:48/ 0 赞/ 204 阅读

相关页面滚动监听事件

滚动监听事件一般网页中的返回顶部按钮都是通过滚动监听事件来实现的这个例子是当滚动条下拉到一定程度之后，某个元素中的所有内容都变成fixed ![4444][]

红太狼/ 2022年02月01日 02:51/ 0 赞/ 548 阅读

相关 vue滚动事件监听

最近写了一个VUE的web app项目，需要实现某个部位吸顶的效果。即，页面往上滑动，刚好到达该部位时，该部分，固定在顶部显示。 1、监听滚动事件利用VUE写一个在控制台

逃离我推掉我的手/ 2021年09月17日 00:32/ 0 赞/ 569 阅读