2019独角兽企业重金招聘Python工程师标准>>>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>bootstrap中滚动导航监听主要的就是在导航中a标签的href属性值与要控制的div的id属性对应</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <style>
        body {
            position: relative;
        }
        #section1 {padding-top:50px;height:500px;color: #fff; background-color: #1E88E5;}
        #section2 {padding-top:50px;height:500px;color: #fff; background-color: #673ab7;}
        #section3 {padding-top:50px;height:500px;color: #fff; background-color: #ff9800;}
        #section41 {padding-top:50px;height:500px;color: #fff; background-color: #00bcd4;}
        #section42 {padding-top:50px;height:500px;color: #fff; background-color: #009688;}
    </style>
</head>
<body data-spy="scroll" data-target=".navbar" data-offset="50">
        <nav class="navbar navbar-inverse navbar-fixed-top">
            <div class="container-fluid">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>                        
                    </button>
                    <a class="navbar-brand" href="#">WebSiteName</a>
                </div>
                <div>
                    <div class="collapse navbar-collapse" id="myNavbar">
                        <ul class="nav navbar-nav">
                            <li><a href="#section1">Section 1</a></li>
                            <li><a href="#section2">Section 2</a></li>
                            <li><a href="#section3">Section 3</a></li>
                            <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Section 4 <span class="caret"></span></a>
                                <ul class="dropdown-menu">
                                    <li><a href="#section41">Section 4-1</a></li>
                                    <li><a href="#section42">Section 4-2</a></li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </nav>

<div id="section1" class="container-fluid">
    <h1>Section 1</h1>
    <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
    <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
    </div>
    <div id="section2" class="container-fluid">
        <h1>Section 2</h1>
        <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
        <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
    </div>
    <div id="section3" class="container-fluid">
        <h1>Section 3</h1>
        <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
        <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
    </div>
    <div id="section41" class="container-fluid">
        <h1>Section 4 Submenu 1</h1>
        <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
        <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
    </div>
    <div id="section42" class="container-fluid">
        <h1>Section 4 Submenu 2</h1>
        <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
        <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
</div>

</body>
</html>

转载于:https://my.oschina.net/u/3803573/blog/2875082

bootstrap的滚动监听相关推荐

  1. Bootstrap（滚动监听）

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  2. Bootstrap3 滚动监听插件的事件

    滚动监听插件的事件 Bootstrap为滚动监听插件提供了一个事件 activate.bs.scrollspy,每当一个新的导航项目被激活时,就会触发该事件,并自动为导航条的相应菜单项添加了一个 .a ...

  3. Bootstrap3 滚动监听插件的选项

    滚动监听插件的选项 Bootstrap为滚动监听插件提供了一个选项 offset,用来调整滚动位置距顶部偏移的像素值,取值为数字,默认值为10.正值表示滚动条向上偏移,负值表示向下偏移. offset ...

  4. Bootstrap3 滚动监听的使用方法

    滚动监听 Bootstrap的滚动监听插件(scrollspy.js)能够根据滚动的位置,自动更新导航条中相应的导航项. 什么是滚动监听?先看一个简单的例子:假设页面上有两个区域,一个是导航区域,一个 ...

  5. 4.18、Bootstrap V4自学之路-----内容---滚动监听

    为什么80%的码农都做不了架构师?>>>    总体来说,用起来不是特别满意,先放一放吧. 导航条示例 滚动监听插件会根据滚动的位置,自动更新导航条的目标.滚动在导航条下面的区域,查 ...

  6. bootstrap中轮播图、模态框、提示框/弹出框、滚动监听、弹性布局、响应式flex、多媒体对象

    轮播图: bootstrap封装了轮播图的功能,其具体如下: 类名 描述 .carousel 创建一个轮播图块的容器,实质是做布局用:且此容器应该有一个di属性,其属性值提供给下面左右按钮href锚点 ...

  7. Bootstrap 滚动监听插件Scrollspy 的事件

    事件 Bootstrap滚动监听插件Scrollspy提供了一个事件 activate,每当一个新的导航项目被激活时,就会触发该事件,并自动为导航条的相应菜单项添加了一个 .active 类,让它高亮 ...

  8. Bootstrap 滚动监听插件Scrollspy 的选项

    选项 Bootstrap滚动监听插件Scrollspy提供了一个选项 offset,用来调整滚动位置距顶部偏移的像素值,取值为数字,默认值为10.正值表示滚动条向上偏移,负值表示向下偏移. 所有的选项 ...

  9. Bootstrap 滚动监听Scrollspy 调用方式

    调用方式 1.data属性调用 只需给监听对象定义 data-spy="scroll" 属性及 data-target 属性,就可以激活滚动监听插件. data-target 属性 ...

最新文章

  1. 深入理解Java虚拟机——第二章——Java内存区域与内存溢出异常
  2. make[1]: g++: Command not found
  3. LinDaiDai的 2019 面试准备
  4. PHP编译遇到的问题
  5. 每天学一点儿shell：shell脚本的异步执行
  6. C++文件操作之get/getline（待学）
  7. 利用geogle中memory工具分析js占用内存
  8. Cloud for Customer客户主数据重复检查duplicate check的前台实现
  9. 当前方法的代码已经过优化，因此无法计算表达式的值
  10. 敏捷开发系列学习总结（2）——Bug修改流程
  11. linux学习笔记：如何更改文件属性？
  12. 如何能把 fastdfs-client-java的jar包安装到本地的仓库中
  13. 隐式反馈的去噪，模型取得巨大提升！
  14. 网络中的一些专业名词解释
  15. 无人机群编队分析的定位问题 分析与思考-1（数学建模竞赛2022年B题）
  16. 彭聃龄普通心理学第5版笔记和课后习题答案
  17. BMFont字体编辑器的使用
  18. python之自动化部署SpringCloud，且脱离python环境运行
  19. 光辉岁月--beyond 献给麦德拉
  20. 新闻与Android相关的话题,热门话题 － 换个角度看新闻 #iOS #Android

热门文章

  1. latex字体_[LaTeX 引擎] XeLaTeX + macOS，通过字体名调用发行版字体
  2. u盘复制不进去东西_限制电脑只能识别自己指定的U盘
  3. python paperclip_Python pyplot.sca方法代码示例
  4. MFC:ListControl数据修改
  5. 深度学习总结——CS231n课程深度学习（机器视觉相关）笔记整理
  6. 【通知】《深度学习之摄影图像处理》配套代码开源！
  7. 送书 | 经典框架Kaldi配套的语音识别实战
  8. 【cntk速成】cntk图像分类从模型自定义到测试
  9. 全球及中国模块化塑料带行业供需调查及产销形势预测报告2021-2027年版
  10. 全球及中国服务器电源行业市场深度策略分析及投资规划咨询建议报告2022-2028年版