附加导航(Affix)插件允许指定 <div> 固定在页面的某个位置。一个常见的例子是社交图标。它们将在某个位置开始,但当页面点击某个标记,该 <div> 会锁定在某个位置,不会随着页面其他部分一起滚动。

如果您想要单独引用该插件的功能,那么您需要引用 affix.js。或者,正如 Bootstrap 插件概览 一章中所提到,您可以引用 bootstrap.js或压缩版的 bootstrap.min.js

用法

您可以通过 data 属性或者通过 JavaScript 来使用附加导航(Affix)插件。

  • 通过 data 属性:如需向元素添加附加导航(Affix)行为,只需要向需要监听的元素添加 data-spy="affix" 即可。请使用偏移来定义何时切换元素的锁定和移动。

Bootstrap 附加导航(Affix)插件的更多相关文章

  1. Bootstrap 附加导航(Affix)插件

    bootstrap 附加导航(Affix)插件允许某个div元素固定到页面中的某个位置.您可以打开或关闭使用该插件之间进行切换 后续再写

  2. 第二百四十九节,Bootstrap附加导航插件

    第二百四十九节,Bootstrap附加导航插件 学习要点: 1.附加导航插件 本节课我们主要学习一下 Bootstrap 中的附加导航插件 一.附加导航 注意:此插件要使用 bootstrap3.0. ...

  3. 使用附加导航(affix)实现内容切换

    <!DOCTYPE html> <html> <head> <title> new document </title> <meta c ...

  4. bootstrap的 附加导航Affix导航 (侧边窄条式 滚动监控式导航) 附加导航使用3.

    affix: 意思是粘附, 附着, 沾上. 因此, 附加导航就是 bootstrap的 Affix.js组件. bootstrap的 附加导航, 不是说导航分成主导航, 或者什么 副导航的 而是指, ...

  5. Bootstrap中的Affix插件

    我们为什么要用bootstrap?因为懒!哦....不,是因为方便,呃...意思差不多. 今天来说说Affix这个插件,它可以使导航栏固定,免去了自己手写的麻烦,用着非常方便,废话不多说,下面是用法. ...

  6. 解决Bootstrap 附加导航(Affix)的问题和使用时若干注意事项

    1.要清楚Affix分别赋予的class, 开始:affix-top 达到top参数:affix 达到bottom参数:affix-bottom 2.一定要自定义这些class,否则 插件会默认给你在 ...

  7. Bootstrap Affix(附加导航(Affix)插件的用法)

    原文网址:http://www.runoob.com/bootstrap/bootstrap-affix-plugin.html Bootstrap 附加导航(Affix)插件 附加导航(Affix) ...

  8. Bootstrap-Plugin:附加导航(Affix)插件

    ylbtech-Bootstrap-Plugin:附加导航(Affix)插件 1.返回顶部 1. Bootstrap 附加导航(Affix)插件 附加导航(Affix)插件允许某个 <div&g ...

  9. Bootstrap 学习笔记13 附加导航插件

    附加导航代码: <style> a:focus { outline: none; } .nav-pills { width: 150px; } .nav-pills.affix { top ...

随机推荐

  1. 第五篇 scrapy安装及目录结构,启动spider项目

    实际上安装scrapy框架时,需要安装很多依赖包,因此建议用pip安装,这里我就直接使用pycharm的安装功能直接搜索scrapy安装好了. 然后进入虚拟环境创建一个scrapy工程: (third ...

  2. 2018-8-10-wpf-DoEvents-

    title author date CreateTime categories wpf DoEvents lindexi 2018-08-10 19:16:51 +0800 2018-2-13 17: ...

  3. OneDrive一直后台占用CPU的一种解决办法

    系统版本:Windows 7 ultimate x64 Onedrive版本:17.3.6998.0830 最近发现Onedrive一直在后台占用15%左右的CPU,很是觉得奇怪,网上的解决方案是删除 ...

  4. ES6形参默认值

    * 形参的默认值----当不传入参数的时候默认使用形参里的默认值 function Point(x = ,y = ) { this.x = x; this.y = y; } //定义一个点的坐标 fu ...

  5. Maven pom配置(Spring+SpringMvc+mybaties)

    <?xml version="1.0" encoding="UTF-8"?><project xmlns="http://maven ...

  6. 深入浅出的Object.defineProperty()

    vue的原理 观察者模式和订阅-发布者模式. Vue实例被创建时,会遍历data属性,并通过Object.defineProperty将 这些属性转化为getter/setter,并进行追踪依赖.每当 ...

  7. MLE极大似然估计和EM最大期望算法

    机器学习十大算法之一:EM算法.能评得上十大之一,让人听起来觉得挺NB的.什么是NB啊,我们一般说某个人很NB,是因为他能解决一些别人解决不了的问题.神为什么是神,因为神能做很多人做不了的事.那么EM ...

  8. NX二次开发-UFUN创建表达式UF_MODL_create_exp无TAG

    NX9+VS2012 #include <uf.h> #include <uf_modl.h> UF_initialize(); //创建一个新的表达式,无TAG UF_MOD ...

  9. DZY LOVES MATH (莫比乌斯反演)

    OK!开始更新莫比乌斯反演 先看了一下数据范围,嗯,根据\(jiry\)老师的真言,我们一定是可以筛一遍然后用根号或者是\(log\)的算法. 题目思路挺简单,就是把原始的式子化成: \(\sum_{ ...

  10. pure-ftpd 配置

    # Disallow anonymous connections. Only allow authenticated users. NoAnonymous yes # If you want simp ...