Bootstrap每天必学之滚动监听

2024-12-04 03:14:33

本文为大家介绍Bootstrap滚动监听，供大家学习，具体内容如下

1. Scrollspy currently requires the use of a Bootstrap nav component for proper highlighting of active links.

---- 使用滚动监听的话，导航栏必须采用 class="nav"的nav组件才可以：

下面是源代码中的一段，标红的部分可以证明这一点：

使用ScrollSpy的时候，需要采用<ul class="nav">标签，并且在<li>下必须有<a>标签。

注：另外我们需要把<ul class="nav">标签放到另一个容器内(如div)，并给父容器添加一个id属性(这一点在第4节有介绍)

function ScrollSpy(element, options) {
 this.$body   = $(document.body)
 this.$scrollElement = $(element).is(document.body) ? $(window) : $(element)
 this.options  = $.extend({}, ScrollSpy.DEFAULTS, options)
 this.selector  = (this.options.target || '') + ' .nav li > a'
 this.offsets  = []
 this.targets  = []
 this.activeTarget = null
 this.scrollHeight = 0

 this.$scrollElement.on('scroll.bs.scrollspy', $.proxy(this.process, this))
 this.refresh()
 this.process()
 }

2. Navbar links must have resolvable id targets. For example, a <a href="#home">home</a> must correspond to something in the DOM like <div id="home"></div>.

--- 简单的说，就是<li>下的<a>标签必须有一个href="#id"属性，并且在滚动的内容里面，必须有对应的<a id="id"></a>这样的标签；当内容滚动到<a id="id">标签时，对应的<li>的<a href="#id">就会自动被选中。

--其实这一点做过Web开发的朋友都知道，在之前的HTML版本中，锚标记通常采用<a name="tag">这样的方式，但HTML5中的锚标记已经抛弃了name属性，而是采用id属性

 ScrollSpy.prototype.activate = function (target) {
 this.activeTarget = target

 this.clear()

 var selector = this.selector +
  '[data-target="' + target + '"],' +
  this.selector + '[href="' + target + '"]'

 var active = $(selector)
  .parents('li')
  .addClass('active')

 if (active.parent('.dropdown-menu').length) {
  active = active
  .closest('li.dropdown')
  .addClass('active')
 }

 active.trigger('activate.bs.scrollspy')
 }

3. No matter the implementation method, scrollspy requires the use of position: relative; on the element you're spying on. In most cases this is the <body>. When scrollspying on elements other than the <body>, be sure to have a height set and overflow-y: scroll; applied.

--- 如果监听Body的滚动，那么你必须给body添加position:relative样式

--- 如果监听的不是Body，而是其他得元素[貌似这种方式常见]，那么你需要添加三个样式：position:relative;height:500px;overflow-y:scroll;

ScrollSpy.prototype.refresh = function () {
 var that   = this
 var offsetMethod = 'offset'
 var offsetBase = 0

 this.offsets  = []
 this.targets  = []
 this.scrollHeight = this.getScrollHeight()

 if (!$.isWindow(this.$scrollElement[0])) {
  offsetMethod = 'position'
  offsetBase = this.$scrollElement.scrollTop()
 }

4. To easily add scrollspy behavior to your topbar navigation, add data-spy="scroll" to the element you want to spy on (most typically this would be the <body>). Then add the data-target attribute with the ID or class of the parent element of any Bootstrap .navcomponent.

--- 你需要给滚动内容的标签添加 data-spy="scroll"属性和data-target属性

data-spy 属性指明了被监听的元素，data-target属性指明滚动时需要控制的nav高亮显示

再看一次下面的初始化源代码，标红的位置，this.options.target的值，就等于滚动内容元素的data-target的值，看到这里，你或许已经想到，在定义.nav组件的时候，我们需要把.nav放在另一个容器内(比如div),且该容器需要有一个id属性（与这里data-target需要设置的值相同）。

function ScrollSpy(element, options) {
 this.$body   = $(document.body)
 this.$scrollElement = $(element).is(document.body) ? $(window) : $(element)
 this.options  = $.extend({}, ScrollSpy.DEFAULTS, options)
 this.selector  = (this.options.target || '') + ' .nav li > a'
 this.offsets  = []
 this.targets  = []
 this.activeTarget = null
 this.scrollHeight = 0

 this.$scrollElement.on('scroll.bs.scrollspy', $.proxy(this.process, this))
 this.refresh()
 this.process()
 }

5. After adding position: relative; in your CSS, call the scrollspy via JavaScript:

$('yourTag').scrollspy({ target: 'nav-parent-div-id' })
-- yourTag 就是要承载滚动内容的元素的ID，nav-parent-div-id 就是.nav元素的父元素的id（也就是data-target的值）

乱七八糟写了一堆，下面总结一个简单的几个步骤：

　　1. 添加标签<div id="scrollSpyID">

　　2. 在标签内添加.nav组件，并给li->a添加href="#tag"属性

　　3. 添加<div id="content" data-spy="scroll" data-target="#scrollSpyID">;

　　4. 添加样式#content{height:500px;overflow-y:scroll;opsition:relative;}

　　5. 添加脚本$('#content').scrollspy({target:'scrollSpyID'});

最后来个小栗子：

<style type="text/css">
  #body {
   position: relative;
   height: 500px;
   overflow-y: scroll;
  }
 </style>

<div id="sc">
  <ul class="nav nav-pills">
   <li class="active">
    <a href="#A">第一段</a>
   </li>
   <li>
    <a href="#B">第二段</a>
   </li>
   <li>
    <a href="#C">第三段</a>
   </li>
  </ul>

 </div>

<div id="body" class="container-fluid" data-spy="scroll" data-target="#sc">

　　<a id="A">第一段</a><br />

　　　　<!-- 这里要有很多内容，至少要保证可以滚动 -->

　　<a id="A">第二段</a><br />

　　　　<!-- 这里要有很多内容，至少要保证可以滚动 -->

　　<a id="A">第三段</a><br />

　　　　<!-- 这里要有很多内容，至少要保证可以滚动 -->

</div>

$(function () {
 $('#body').scrollspy({ target: '#sc' });
});

如果大家还想深入学习，可以点击这里进行学习，再为大家附两个精彩的专题：Bootstrap学习教程
Bootstrap实战教程

以上就是本文的全部内容，希望对大家的学习有所帮助。

Bootstrap滚动监听（Scrollspy）插件详解

滚动监听(Scrollspy)插件,即自动更新导航插件,会根据滚动条的位置自动更新对应的导航目标.其基本的实现是随着您的滚动,基于滚动条的位置向导航栏添加 .active class. 如果您想要单独引用该插件的功能,那么您需要引用 scrollspy.js.或者,正如 Bootstrap 插件概览一章中所提到,您可以引用 bootstrap.js 或压缩版的 bootstrap.min.js. 一.用法您可以向顶部导航添加滚动监听行为: 1.通过 data 属性:向您想要监听的元素(通常是
Bootstrap滚动监听组件scrollspy.js使用方法详解

其实滚动监听使用的情况还是很多的,比如导航居于右侧,当主题内容滚动某一块的时候,右侧导航对应的要高亮. 实现功能 1.当滚动区域内设置的hashkey距离顶点到有效位置时,就关联设置其导航上的指定项 2.导航必须是 .nav > li > a 结构,并且a上href或data-target要绑定hashkey 3.菜单上必须有.nav样式 4.滚动区域的data-target与导航父级Id(一定是父级)要一致. <div id="selector" class=&qu
学习Bootstrap滚动监听附调用方法

本文为大家介绍Bootstrap滚动监听,供大家学习,具体内容如下滚动监听伴随着滚动条的滚动,列表项被不断切换激活   <div id="menu" class="navbar navbar-fixed-to
BootStrap下拉菜单和滚动监听插件实现代码

废话不多说了,直接给大家贴代码了,具体代码如下所述: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no
Bootstrap教程JS插件滚动监听学习笔记分享

本文主要来学习一下JavaScript插件--滚动监听. 1.案例滚动监听插件可以根据滚动条的位置自动更新所对应的导航标记.你可以试试滚动这个页面,看看左侧导航的变化. 先把实现的代码上了,你可以通过测试代码先来看看效果. <!DOCTYPE html> <html> <head> <title>Bootstrap</title> <meta name="viewport" content="width=de
全面解析Bootstrap中scrollspy（滚动监听）的使用方法

bootstrap源码分析之scrollspy(滚动侦听) 源码文件: Scrollspy.js 实现功能 1.当滚动区域内设置的hashkey距离顶点到有效位置时,就关联设置其导航上的指定项 2.导航必须是 .nav > li > a 结构,并且a上href或data-target要绑定hashkey 3.菜单上必须有.nav样式 4.滚动区域的data-target与导航父级Id(一定是父级)要一致 <div id="selector" class="n
Bootstrap每天必学之滚动监听

本文为大家介绍Bootstrap滚动监听,供大家学习,具体内容如下 1. Scrollspy currently requires the use of a Bootstrap nav component for proper highlighting of active links. ---- 使用滚动监听的话,导航栏必须采用 class="nav"的nav组件才可以: 下面是源代码中的一段,标红的部分可以证明这一点: 使用ScrollSpy的时候,需要采用<ul class=
jQuery实现可兼容IE6的滚动监听功能

本文实例讲述了jQuery实现可兼容IE6的滚动监听功能.分享给大家供大家参考,具体如下: 其实这东西本打算用原生的javascript来写,但是原生的javascript取class与监听滚动条的滚动过于麻烦,因此上了jQuery,没关系,反正兼容IE6就行. 将实现如下的效果: 也就是在网页中有点常见的滚动监听.相应的标题,滚到哪里,则左边的滚动条当前标题前的...就变成>>>,,当然了,左边的标题同样是可以点击,马上滚到该滚的地方. 首先是网页布局部分,代码如下,请忽略大堆的Jav
jQuery滚动监听实现商城楼梯式导航效果

话不多说,上局部效果图: html结构,左侧定位的导航需要一个ul,中间内容,我是直接截得图片,为了效果省事,也是用的ul,最后你们要用的话也可以用ul,或者div,但是每个区域得是一个div,例如,精选的放一个div,女装的放一个div,所有的区域都套在一个大的div里面,也就是类似于ul>li的结构(只提供html结构和jQuery,样式的话根据设计稿): <div class="menu"> <ul> <li class="on&qu
详解使用vue-router进行页面切换时滚动条位置与滚动监听事件

按照正常的产品逻辑,我们在进行页面切换时滚动条应该是在页面顶部的,可是...在使用vue-router进行页面切换时,发现滚动条所处的位置被自动记录了下来,且在另一个组件内定义的滚动监听事件仍会运行,着实吃了一大惊... 说说我的破解方法: 1.在每个需要用vue-router切换的组件的mounted钩子内将页面的位置自动回滚到页面顶部,解决滚动条位置自动记录问题: 2.在每个组件内定义一条变量scrollWatch默认为true,在绑定滚动监听事件时加个if判断,只有在scrollWatch
vue监听滚动事件实现滚动监听

在vue中实现滚动监听和原生js无太大差异,下面是一个简单的demo,可在控制台查看结果 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="https://unpkg

Bootstrap每天必学之滚动监听

相关推荐

随机推荐