BootStrap滚动监听

最新推荐文章于 2022-12-16 07:00:00 发布

秋城落叶

最新推荐文章于 2022-12-16 07:00:00 发布

阅读量2.1k

点赞数 1

本文链接：https://blog.csdn.net/qq_40861561/article/details/105217358

版权

滚动监听（Scrollspy）插件，即自动更新导航插件，会根据滚动条的位置自动更新对应的导航目标

其基本的实现是随着您的滚动，基于滚动条的位置向导航栏添加 .active class

<body data-spy="scroll" data-target=".navbar-example">
...
<div class="navbar-example">
    <ul class="nav nav-tabs">
        ...
    </ul>
</div>
...
</body>

通过 JavaScript:您可以通过 JavaScript 调用滚动监听，选取要监听的元素，然后调用 .scrollspy() 函数:

$('body').scrollspy({ target: '.navbar-example' })

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
        <title></title>
    </head>
    <body>
            <div>
  <ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active"><a href="#Android" aria-controls="home" role="tab" data-toggle="tab">Android</a></li>
    <li role="presentation"><a href="#JAVA" aria-controls="JAVA" role="tab" data-toggle="tab">Profile</a></li>
    <li role="presentation"><a href="#PHP" aria-controls="PHP" role="tab" data-toggle="tab">Messages</a></li>
    <li role="presentation"><a href="#BootStrap" aria-controls="BootStrap" role="tab" data-toggle="tab">Settings</a></li>
  </ul>
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="Android">Android是一种基于Linux的自由及开放源代码的操作系统。主要使用于移动设备，如智能手机和平板电脑，由Google（谷歌）公司和开放手机联盟领导及开发。</div>
    <div role="tabpanel" class="tab-pane" id="JAVA">Java是一门面向对象编程语言，不仅吸收了C++语言的各种优点，还摒弃了C++里难以理解的多继承、指针等概念</div>
    <div role="tabpanel" class="tab-pane" id="PHP">PHP（外文名:PHP: Hypertext Preprocessor，中文名：“超文本预处理器”）是一种通用开源脚本语言。语法吸收了C语言、Java和Perl的特点，利于学习，使用广泛，主要适用于Web开发领域</div>
    <div role="tabpanel" class="tab-pane" id="BootStrap">Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷</div>
  </div>
    </body>
</html>

用法
向顶部导航添加滚动监听行为：

通过 data 属性：向您想要监听的元素（通常是 body）添加 data-spy="scroll"

然后添加带有 Bootstrap .nav 组件的父元素的 ID 或 class 的属性 data-target。

确保页面主体中有匹配您所要监听链接的 ID 的元素存在

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"> 
    <title></title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
</head>
<body>
<nav id="myScroll" class="navbar navbar-default navbar-static" role="navigation">
    <div class="container-fluid"> 
        <div class="navbar-header">
            <button class="navbar-toggle" type="button" data-toggle="collapse" 
                    data-target=".bs-js-navbar-scrollspy">
                <span cla

最低0.47元/天解锁文章

秋城落叶

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
BootStrap滚动监听

滚动监听（Scrollspy）插件，即自动更新导航插件，会根据滚动条的位置自动更新对应的导航目标其基本的实现是随着您的滚动，基于滚动条的位置向导航栏添加.activeclass<bodydata-spy="scroll"data-target=".navbar-example">...<divclass...
复制链接

扫一扫