我们为什么要用bootstrap?因为懒!哦....不,是因为方便,呃...意思差不多。

今天来说说Affix这个插件,它可以使导航栏固定,免去了自己手写的麻烦,用着非常方便,废话不多说,下面是用法。

Affix用法:

  • 通过 data 属性:如需向元素添加附加导航(Affix)行为,只需要向需要监听的元素添加 data-spy="affix" 即可。请使用偏移来定义何时切换元素的锁定和移动。
<div data-spy="affix" data-offset-top="60" data-offset-bottom="200">
code...
</div>
  • data-spy : 该属性可以让导航栏固定,不过用了这个属性可能会使你的页面结构发生改变,比如CSS的层级或样式问题。
  • data-offset-top : 该属性用来设置距离页面顶部偏移多少,然后再使导航定位。
  • data-offset-bottom : 该属性用来设置距离页面底部偏移多少,然后再使导航定位。

还有另一种方法:

  • 通过 JavaScript:您可以通过 JavaScript 手动为某个元素添加附加导航(Affix),如下所示:
$('#myAffix').affix({
offset: {
top: 100,
bottom: function () {
return (this.bottom = $('.footer').outerHeight(true))
}
}
})
  • 获取到标签,调用affix方法,用offset对象设置属性和属性值。

这个插件不管是横竖的导航条都很实用,用法套路也是差不多的,还是看项目用哪种方法合适吧。

最后附上bootstrap中文网的affix链接,不过没有中文翻译:http://v3.bootcss.com/javascript/#affix

Bootstrap中的Affix插件的更多相关文章

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

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

  2. BootStrap中的collapse插件堆叠效果

    通过网络上的一系列查找,总结出的collapse插件堆叠效果(网上没有找到,只能自己弄了,帮助那些和我遇到一样状况的同学) 首先感谢一位网友的知识总结给了我灵感,在这里先帮他推荐一波(https:// ...

  3. Bootstrap中的datetimepicker插件用法总结(转载)

    datetimepicker用法总结   目录 datetimepicker用法总结 目录 简述 官方文档 选项属性 1 format 格式 2 weekStart 一周从哪一天开始 3 startD ...

  4. Bootstrap支持的JavaScript插件

    1.导入JavaScript插件 Bootstrap除了包含丰富的Web组件之外,如前面介绍的下拉菜单.按钮组.导航.分页等.他还包括一些JavaScript的插件. Bootstrap的JavaSc ...

  5. BootStrap中Affix控件的使用方法及如何保持布局的美观

    Affix是BootStrap中的一个很有用的控件,他能够监视浏览器的滚动条的位置并让你的导航始终都在页面的可视区域.一开始的时候,导航在页面中是普通的流式布局,占有文档中固定的位置,当页面滚动的时候 ...

  6. 12、Bootstrap中文文档(其它插件分享)

    给大家介绍一个前端框架让你从此写起前端代码与之先前相比如有神助般的效果拉就是Bootstrap. 本片导航: Bootstrap的下载 css样式的使用 JavaScript 效果的引用 其他前端插件 ...

  7. Bootstrap中DropDown插件显示下拉列表,点击下拉列表区域,不会再自动关闭。

    目标: Bootstrap中DropDown插件显示下拉列表,点击下拉列表区域,不会再自动关闭. 参考:http://v3.bootcss.com/javascript/#dropdowns    / ...

  8. yii2.0使用bootstrap中日期插件

    Yii2框架引用bootstrap中日期插件yii2-date-picker的方法. 使用composer安装 日期插件 php composer.phar require "2amigos ...

  9. 在Bootstrap开发框架中使用bootstrap-datepicker插件

    在基于Boostrap的Web开发中,往往需要录入日期内容,基于Boostrap的插件中,关于日期的录入可以使用bootstrap-datepicker这个非常不错的插件,以替代默认的type=dat ...

随机推荐

  1. MySQL备份恢复之mysqldump

      Preface       The day before yesterday,there's a motif about the lock procedure when backing up My ...

  2. 如何在linux中创建虚拟环境

    安装虚拟环境的命令 : sudo pip install virtualenv sudo pip install virtualenvwrapper 安装完虚拟环境后,如果提示找不到mkvirtual ...

  3. mysql 查询各个阶段所消耗的时间

  4. kali下添加用户和权限分配

    1.添加用户 useradd -m test #-m的意思是创建用户的主目录 2.为用户test设置密码. passwd test 3.为添加的用户赋予权限(-a 添加 :-G 群组) 如果没有这一步 ...

  5. Configuration Alias

    第一个里程碑 ---- 查看系统别名 [root@xilong ~]# alias alias cp='cp -i' alias egrep='egrep --color=auto' alias fg ...

  6. 前端javaScript经典面试题

    1.alert(1&&2),alert(1||0) alert(1&&2)的结果是2 只要“&&”前面是false,无论“&&”后面是t ...

  7. 修改二维码生成插件jquery.qrcode.js支持加入自定义LOGO

    1,将jquery.qrcode.min.js和jquery添加到您的网页中 <script src="jquery.min.js"></script> & ...

  8. 简易的vuex用法

    vuex是vue中用于管理全局状态的一个组件,用于不同组件之间的通信,下面将介绍它的简单用法 首先安装vue与vuex npm install vue npm install vuex --save ...

  9. spark-day1

    #!/usr/bin/python # -*- coding: utf_8 -*- from pyspark import SparkConf, SparkContext import os, tim ...

  10. hive-show-partitions

    展示分区命令 show partitions show partitions 可以展示这个表格之下的所有分区信息.这个命令常常用在使用SQL语句操作数据之前.举个简单的例子,如果我们想要根据uid融合 ...