固定定位大师 - fixto

固定定位大师 - fixto

fixtoA jQuery plugin for sticky positioning项目地址:https://gitcode.com/gh_mirrors/fi/fixto

fixto 是一个基于jQuery的插件，专门用于实现元素的智能固定定位。它能让你的容器在滚动时相对于某个祖先元素保持固定位置。通过查看演示页面或开发页面dev2，你可以直接体验到它的效果。

功能特性

• 响应式设计
• 支持多个实例
• 开启、停止和销毁功能
• 根据视口高度调整
• 处理由变形的祖先元素引起的定位上下文
• 当可用时，利用原生的“position: sticky”

浏览器兼容性

现代浏览器以及IE8+均被支持。

快速上手

下载生产版本或开发版本。

引入jQuery库：

<script src="jquery.js"></script>

接着添加fixto：

<script src="fixto.min.js"></script>

使用方法

通过jQuery进行操作：

$('#nav').fixTo('body');

可以同时对多个容器进行固定：

$('.sticky').fixTo('.sticky-holder');

传递选项：

$('#left-banner').fixTo('#left-column', {
    className : 'my-class-name',
    zIndex: 10,
    mind: '#header',
    top: 20
});

不依赖jQuery也能创建实例：

var sticky = fixto.fixTo(domElementToFix, domElementToBeFixed, options);

样式设置

当容器处于固定状态时，将添加类名fixto-fixed。你可以利用这个类或者自定义类名。但请注意，若使用了原生的position: sticky，则无法应用这个功能。

选项

className (字符串)

如上述示例所示。

zIndex (数字)

可以设置固定的z-index值。例如：

zIndex: 10,

mind (选择器)

如果有其他固定容器在同一页面，可以通过mind选项防止它们重叠。

例子：

$('#header').fixTo('body');

$('#left-banner').fixTo('#left-column', {
    mind: '#header'
});

mind的选择器可任意形式，jQuery能处理就行。也可以传入多个元素。

top (数字)

以像素为单位。固定元素会保留顶部的一段间距。

useNativeSticky (布尔)

如果浏览器支持，fixto将使用原生的position: sticky。若想禁用这一特性，将此选项设为false。

一旦初始化后，此选项不能更改。如果需要改变，可以先销毁实例再创建新的。

公共方法

以下方法可以直接在实例上调用或通过jQuery调用。

refresh

在布局发生变化时，使用refresh强制fixto适应新布局。

instance.refresh();

jQuery方式：

$('#nav').fixTo('refresh');

setOptions(options)

重置选项。fixto会自动刷新自身以适应该设置。

instance.setOptions({
    top: 10
});

jQuery方式：

$('#nav').fixTo('setOptions', {
    top: 10
});

destroy

销毁实例：

instance.destroy();

jQuery方式：

$('#nav').fixTo('destroy');

stop

停止实例的行为，但不销毁实例。

instance.stop();

jQuery方式：

$('#nav').fixTo('stop');

start

恢复实例的行为。

instance.start();

jQuery方式：

$('#nav').fixTo('start');

已知问题

• 不适用于具有margin:auto的元素。需要在元素周围加上包裹层。
• 在Safari中，如果存在变换的父元素，并且未使用原生粘性定位，可能会出现闪烁。这是因为在Safari中，已经支持了原生的position: sticky，所以只有当你禁止了原生粘性定位时才会看到这个问题。
• 原生粘性定位版本中有些功能并未实现。为确保性能，以及遵循position: sticky的发展，目前决定不对原生模式下实现这些额外的功能。如果希望在原生粘性定位模式下看到更多功能，请提交issue。

发布说明

• v0.5.0：增加MIT许可，新增视口敏感度可选功能。
• v0.4.0：添加“mindBottomPadding”选项，使固定元素底部是否考虑父元素内边距成为可选项。
• v0.3.1：修复bug #15
• 更多版本信息，请参考readme中的完整记录。

粘性定位注意事项

如果你发现粘性定位不起作用，可能有以下原因：

• 定位元素有一个祖先元素，其溢出值意外地设定为了auto、hidden或scroll。
• 定位元素的祖先元素计算高度为零。这意味着元素内部的所有内容已脱离流（浮动或绝对定位），导致容器高度变为0。正确清除浮动，但是不能使用overflow在父元素上清除，因为那会违反上面的规则。
• 当父元素的高度为0时，粘性定位不会生效。
• 你可能需要只在文档加载完成后再使用粘性定位。因为现在插件可以在首次实例化时进行特性检测。

通过fixto，你可以轻松应对复杂的网页布局，让用户体验到流畅的滚动与精美的视觉效果。立即试试看吧，你会爱上它的！

fixtoA jQuery plugin for sticky positioning项目地址:https://gitcode.com/gh_mirrors/fi/fixto