23
2020
03

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>

« 上一篇 下一篇 »

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。