[学习交流] 【广州前端】bootstrap常用组件(五)滚动监听Scrollspy插件

本帖最后由 AMay 于 2018-11-16 18:16 编辑

【简介】

页面滚动行为，是常见的一个特效场景。常见的业务需求有，鼠标放在某个区域，鼠标滚动，某个区域发生滚动行为，页面整个页面在浏览器中不发生滚动；又例如，会根据滚动条的位置自动更新对应的导航目标….bootstrap的滚动监听（Scrollspy）插件，即自动更新导航插件，其基本的实现是随着您的滚动，基于滚动条的位置向导航栏添加 .active class。

【引入文件】

需要引入的文件有bootstrap的css样式文件。因为bootstrap是基于jquery的，所以要先引入jq文件，再引入bootstrap的js文件。

[HTML] 纯文本查看 复制代码

<link rel="stylesheet" href="lib/css/bootstrap.css">

<script src="lib/js/jquery.v1.12.4.js"></script>

<script src="lib/js/bootstrap.js"></script>

【基本结构与效果】

1. 代码1

[HTML] 纯文本查看 复制代码

<div data-spy="scroll" data-target="#myScrollspy" data-offset="0"

     style="height:200px;overflow:auto; position: relative;">

    <h4 id="qianduan">前端与开发</h4>

    <p>前端开发是创建Web页面或app等前端界面呈现给用户的过程。前端开发通过HTML，CSS及JavaScript以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互 [1]  。它从网页制作演变而来，名称上有很明显的时代特征。在互联网的演化进程中，网页制作是Web1.0时代的产物，早期网站主要内容都是静态，以图片和文字为主，用户使用网站的行为也以浏览为主。随着互联网技术的发展和HTML5、CSS3的应用，现代网页更加美观，交互效果显著，功能更加强大。

    </p>

    <h4 id="java">JavaEE</h4>

    <p>Java是一门面向对象编程语言，不仅吸收了C++语言的各种优点，还摒弃了C++里难以理解的多继承、指针等概念，因此Java语言具有功能强大和简单易用两个特征。Java语言作为静态面向.Java是一门面向对象编程语言，不仅吸收了C++语言的各种优点，还摒弃了C++里难以理解的多继承、指针等概念，因此Java语言具有功能强大和简单易用两个特征。Java语言作为静态面向Java是一门面向对象编程语言，不仅吸收了C++语言的各种优点，还摒弃了C++里难以理解的多继承、指针等概念，因此Java语言具有功能强大和简单易用两个特征。Java语言作为静态面向.Java是一门面向对象编程语言，不仅吸收了C++语言的各种优点，还摒弃了C++里难以理解的多继承、指针等概念，因此Java语言具有功能强大和简单易用两个特征。Java语言作为静态面向

    </p>

    <h4 id="ui">UI设计</h4>

    <p>UI设计（或称界面设计）是指对软件的人机交互、操作逻辑、界面美观的整体设计。UI设计分为实体UI和虚拟UI，互联网说的UI设计是虚拟UI，UI即User Interface(用户界面)的简称。UI设计（或称界面设计）是指对软件的人机交互、操作逻辑、界面美观的整体设计。UI设计分为实体UI和虚拟UI，互联网说的UI设计是虚拟UI，UI即User Interface(用户界面)的简称。

    </p>

</div>

效果1

【事件】

activate.bs.scrollspy： 每当一个新项目被滚动监听激活时，触发该事件。

[JavaScript] 纯文本查看 复制代码

$('#myScrollspy').on('activate.bs.scrollspy', function () {

  // 执行一些动作...

})

2. 代码2

Html的结构代码，和代码1的结构代码一样。

[JavaScript] 纯文本查看 复制代码

$(function(){

        removeSection = function(e) {

            $(e).parents(".section").remove();

            $('[data-spy="scroll"]').each(function () {

                var $spy = $(this).scrollspy('refresh')

            });

        }

        $("#myScrollspy").scrollspy();

        $('#myScrollspy').on('activate.bs.scrollspy', function () {

            var currentItem = $(".nav li.active > a").text();

            console.log("目前您正在查看 - " + currentItem);        })

    });

效果2

帐号		自动登录	找回密码
密码			加入黑马

[学习交流] 【广州前端】bootstrap常用组件(五)滚动监听Scrollspy插件

0 个回复