附加导航(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. 绿盟-WEB应用漏洞扫描系统

    ************************************************** WEB应用漏洞扫描系统 一.工具的介绍与使用 ************************** ...

  2. java-day18

    函数式接口在java中指:有且仅有一个抽象方法的接口 @FunctionalInterface注解:可以检测接口是否是一个函数式接口 函数式接口的使用:一般可以作为方法的参数和返回值类型 自定义函数式 ...

  3. 微信app支付返回-1的问题

    我也是被坑就当留个纪念 前两天查了各种关于微信app支付返回-1的都是ERR_COMM 问题然后各种 验证最后还是误解 第三天去验证了一下微信开放平台发现了问题 appid 不在同一个开放平台 项目之 ...

  4. uniq - 删除排序文件中的重复行

    总览 (SYNOPSIS) ../src/uniq [OPTION]... [INPUT [OUTPUT]] 描述 (DESCRIPTION) 从 INPUT (或 标准输入) 数据 中 忽略 (但是 ...

  5. Mysql ibd恢复(delete 数据)

    转载:https://www.linuxidc.com/Linux/2017-05/143870.htm 首先呢,请各位注意Percona Data Recovery Tool for InnoDB工 ...

  6. pandas读书笔记 算数运算和数据对齐

    pandas最重要的一个功能是,它可以对不同索引的对象进行算数运算.在对象相加时,如果存在不同的索引对,则结果的索引就是该索引对的并集. Series s1=Series([,3.4,1.5],ind ...

  7. selenium 自动下载文件

    #coding=utf-8 from selenium import webdriver #实例化一个火狐配置文件 fp = webdriver.FirefoxProfile() #设置各项参数,参数 ...

  8. 多线程中join的解释(转)

    文章来源:https://www.zhihu.com/question/61446671 这个join可以理解为“加入”,其含义与英语里面讲“Come on,join us”中的join类似.假设线程 ...

  9. 数字IC设计工程师成长之路

    学习的课程 仿真工具VCS实践学习 2019年12月9日-2019年12月23日

  10. Go Hello World 实例

    ## Go Hello World 实例 package main import "fmt" func main() { /* This is my first sample pr ...