资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划，从策略到执行的一站式服务

网站建设 >

查看其它板块

Bootstrap滚动监听插件怎么使用

这篇文章主要介绍了Bootstrap滚动监听插件怎么使用的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇Bootstrap滚动监听插件怎么使用文章都会有所收获，下面我们一起来看看吧。

我们提供的服务有：网站建设、成都网站设计、微信公众号开发、网站优化、网站认证、定兴ssl等。为1000+企事业单位解决了网站和推广的问题。提供周到的售前咨询和贴心的售后服务，是有科学管理、有技术的定兴网站制作公司

一、用法
您可以向顶部导航添加滚动监听行为：

1、通过 data 属性：向您想要监听的元素（通常是 body）添加 data-spy="scroll"。然后添加带有 Bootstrap .nav 组件的父元素的 ID 或 class 的属性 data-target。为了它能正常工作，您必须确保页面主体中有匹配您所要监听链接的 ID 的元素存在。


 ...
 
  
   ...
  
 
 ...

2、通过 JavaScript：您可以通过 JavaScript 调用滚动监听，选取要监听的元素，然后调用 .scrollspy() 函数：
$('body').scrollspy({ target: '.navbar-example' })
二、滚动监听
滚动监听插件是用来根据滚动条所处在的位置自动更新导航项目， 显示导航项目高亮显示。

//基本实例

  Web 开发
  
    
  • 
      HTML5
    
    • 
    
  • 
      Bootstrap
    
    • 
    
      JavaScript 
      
        
  • 
          jQuery
        
    • 
        
  • 
          Yui
        
    • 
        
  • 
          Extjs
        
    • 
      
    
  



  HTML5
  
    
    标准通用标记语言下的一个应用 HTML 标准自 1999 年 12 月发布的 HTML4.01后，后继的 HTML5 和其它标准被束之高阁，为了推动 Web 标准化运动的发展，一些公司联合起来，成立了一个叫做 Web Hypertext Application Technology Working Group（Web 超文本应用技术工作组 -WHATWG） 的组织。WHATWG 致力于 Web 表单和应用程序，而 W3C（World Wide Web Consortium，万维网联盟） 专注于 XHTML2.0。在 2006 年，

    双方决定进行合作，来创建一个新版本的 HTML。
  
    
  Bootstrap
  
    
    Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、 CSS、 JAVASCRIPT 的， 它简洁灵活， 使得 Web 开发更加快捷。 [1]它由 Twitter的设计师 Mark Otto 和 Jacob Thornton 合作开发，是一个 CSS/HTML 框架。Bootstrap提供了优雅的 HTML 和 CSS 规范，它即是由动态 CSS 语言 Less 写成。Bootstrap 一经推出后颇受欢迎，一直是 GitHub 上的热门开源项目，包括 NASA 的 MSNBC（微软全国广播公司）的 Breaking News 都使用了该项目。[2]国内一些移动开发者较为熟悉的框架，如 WeX5前端开源框架等，也是基于 Bootstrap 源码进行性能优化而来。[3]
  
    
  jQuery
  
    
    JQuery 是继 prototype 之后又一个优秀的 Javascript 库。 它是轻量级的 js库 ，它兼容 CSS3，还兼容各种浏览器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+） ，jQuery2.0 及后续版本将不再支持 IE6/7/8 浏览器。jQuery 使用户能更方便地处理 HTML（标准通用标记语言下的一个应用） 、 events、 实现动画效果， 并且方便地为网站提供 AJAX交互。jQuery 还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。 jQuery 能够使用户的 html 页面保持代码和 html 内容分离， 也就是说， 不用再在 html 里面插入一堆 js 来调用命令了， 只需要定义 id 即可。
  
    
  Yui
  
    
    近几年随着 jQuery、Ext 以及 CSS3 的发展，以 Bootstrap 为代表的前端开发框架如雨后春笋般挤入视野， 可谓应接不暇。 不论是桌面浏览器端还是移动端都涌现出很多优秀的框架，极大丰富了开发素材，也方便了大家的开发。这些框架各有特点，本文对这些框架进行初步的介绍与比较， 希望能够为大家选择框架提供一点帮助， 也为后续详细研究这些框架的抛砖引玉。
  
    
  Extjs
  
    
    ExtJS 可以用来开发 RIA 也即富客户端的 AJAX 应用，是一个用 javascript写的，主要用于创建前端用户界面，是一个与后台技术无关的前端 ajax 框架。因此，可以把 ExtJS 用在.Net、Java、Php 等各种开发语言开发的应用中。ExtJs 最开始基于 YUI 技术，由开发人员 JackSlocum 开发，通过参考 JavaSwing 等机制来组织可视化组件，无论从 UI 界面上 CSS 样式的应用，到数据解析上的异常处理，都可算是一款不可多得的JavaScript 客户端技术的精品。
  

    这里有两个重要的属性，如下图：

    Bootstrap滚动监听插件怎么使用

    PS：在一个菜单和一个容易的时候，data-target 不设置也可以稳定实现滚动监听高亮。但多个导航时，你不关联其中一个，会导致错误，所以，一般要加上。

    如果使用 JavaScript 脚本方式， 可以去掉 data-*， 使用脚本属性定义： offset、 spy和 target。具体方法如下：

    //使用脚本方式定义属性

$('#content').scrollspy({
  offset : 0,
  target : '#nav',
});

    滚动监听还有一个切换到新条目的事件。

    Bootstrap滚动监听插件怎么使用

    //事件绑定在导航上

    $('#nav').on('activate.bs.scrollspy', function() {
        alert('新条目被激活后触发此事件！');
    });
    滚动监听还有一个更新容器 DOM 的方法。

    Bootstrap滚动监听插件怎么使用

    //HTML 部分

    
  HTML5 删除此项
  
    
    ...
  

    //删除内容时，刷新一下 DOM，避免导航监听错位

    function removeSec(e) {
  $(e).parents('.sec').remove();
  $('#content').scrollspy('refresh');
}

    注意：这个方法必须使用 data-*声明式。

    关于“Bootstrap滚动监听插件怎么使用”这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对“Bootstrap滚动监听插件怎么使用”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注创新互联行业资讯频道。


    网站题目：Bootstrap滚动监听插件怎么使用
    URL链接：http://cdkjz.cn/article/jdegsg.html
    返回首页 了解更多建站资讯

    相关资讯

    多年建站经验

    多一份参考，总有益处

    联系快上网，免费获得专属《策划方案》及报价

    咨询相关问题或预约面谈，可以通过以下方式与我们联系

    大客户专线   成都：13518219792   座机：028-86922220

    在线咨询 提交需求
    友情链接 交换友情链接
    成都400电话宣传册设计四川锦华橡塑机柜租用成都托管服务器云服务器成都集团网站建设成都包装盒设计成都主机托管成都商城网站开发

    成都网站建设公司地址：成都市青羊区太升南路288号锦天国际A座10层 建设咨询028-86922220

    成都快上网科技有限公司-四川网站建设设计公司 | 蜀ICP备19037934号 Copyright 2020,ALL Rights Reserved cdkjz.cn | 成都网站建设 | © Copyright 2020版权所有.

    专家团队为您提供成都网站建设,成都网站设计,成都品牌网站设计,成都营销型网站制作等服务,成都建网站就找快上网！ | 成都网站建设哪家好？ | 网站建设地图