Affix
Affix插件（affix.js）是一个很有用的插件，它可以让你的导航始终都固定在某个位置。一开始的时候，导航出现在页面的某个位置，当页面滚动一定距离时，无论页面如何滚动，它都固定在一个位置，就像被帖在页面上一样。
Affix插件被翻译为多种中文名称，如粘条、固定导航等，每种翻译都很难准确表达作者的原意。本文干脆不做翻译，直接使用Affix了事，免得画蛇添足。
以下是Affix插件的简单用法：
首先，必须定义一个监听页面滚动的元素，它通常是 body 元素。需要给监听元素定义 data-spy="scroll" 属性来启动滚动监听功能，还要添加 data-target 属性来指定监听对象。如：
<body data-spy="scroll" data-target="#affixMenu">
然后，定义监听对象，它通常是导航菜单。需要给它定义 data-spy="affix" 属性来启动Affix功能。如：
<ul id="affixMenu" class="nav nav-list" data-spy="affix"><li><a href="#overview"> Overview</a></li><li><a href="#transitions"> Transitions</a></li><li><a href="#modals"> Modal</a></li><li><a href="#dropdowns"> Dropdown</a></li></ul>
最后，配置 offset 参数。offset 参数用来定义滚动距离，它是整数值，单位为 px，包括 data-offset-top 和 data-offset-bottom。如，data-offset-top="90" 表示滚动条从顶部向下滚动的距离大于 90px 时，监听对象将会固定不动。
offset 参数可以使用 data 属性设置，也可以使用JavaScript来设置。以下是用data 属性设置：
<ul id="affixMenu" class="nav nav-list" data-spy="affix" data-offset-top="90">
使用JavaScript设置的格式为：
$('#affixMenu').affix(offset)
参数 offset 的值可以是数值或对象。可以传递一个数值，它将同时作用于 data-offset-top 和 data-offset-bottom。也可以传递一个对象，为它们分别赋值。如：
<script>$('#affixMenu').affix({offset: {top: 90, bottom: 90}});</script>
关于作者
歪脖先生，十五年以上软件开发经验，酷爱Web开发，精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等，著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》，并全部在 GitHub 上开源。
扫一扫
1266
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
