Sticky Menu (or Anything!) on Scroll 插件实现吸顶效果

Sticky Menu (or Anything!) on Scroll 是一个用来实现吸顶效果的 wordpress 插件，可以用来固定网站上任何部位元素（当然也包括顶部导航），该插件是基于 sticky-header.js 实现的，我们也可以手动下载 sticky-header.js 文件，通过修改代码来实现吸顶效果。

插件安装

方法很简单，WORDPRESS 后台插件页搜索 「Sticky Menu (or Anything!) on Scroll」，安装完成后启用即可。也可以从 WORDPRESS 官网插件页面搜索「Sticky Menu (or Anything!) on Scroll」并下载，将下载的压缩包上传至 /wp-content/plugins/ 目录并解压，然后在 WORDPRESS 后台插件页启用即可。

当前该插件的版本为 2.21，兼容最新版的 WORDPRESS（5.4.2），活跃安装为 10 万+，而且用户好评度也比较高（五星好评为93.7%）。

参数设置

Basic Settings

a. Sticky Element: (required)

要固定的元素，比如我们要固定头部元素，就可以填入头部元素的 id 或 class 名称（id 名称前加 #，class 名称前加 .），例如本站的头部元素 id 为 menu-container，就可以填写 #menu-container。

b. Space between top of page and sticky element: (optional)

与网站顶部之间的空白间距。

c. Check for Admin Toolbar

检查是否含有 Toolbar。

d. Do not stick element when screen is smaller than: (optional)

设置最小宽度。页面小于此宽度时不产生吸顶效果。

e. Do not stick element when screen is larger than: (optional)

设置最大宽度。页面大于此宽度时不产生吸顶效果。

Advanced Settings

a. Z-index: (optional)

Z-index 参数，如果页面上有其他元素已经设置了 z-index 属性的话，可以在此处设置一个更大的值。

b. Push-up element (optional)

设置一个 Push-up 元素，当该元素到达 Sticky Element 元素位置时，Sticky Element 会失去固定作用。

c. Legacy mode

为了兼容旧版。如果你是从旧版本升级的，可以勾选此选项。

d. Debug mode:

是否开启 Debug 模式。

FAQ/Troubleshooting

该功能中提供了一些常见的用户帮助问题，可以方便我们更好地使用该插件。

配置参考

参数的设置可以参考下图：

效果预览

预览效果如下：

结束语

该插件可以用来固定网站上的任何元素，一般是比较常见的是固定头部或右侧小部件，该插件的兼容性比较好，而且使用方法比较简单，所以推荐给大家。如果你不喜欢使用插件，也可以使用 sticky-header.js 这个 JS 文件。如果有任何意见或建议，欢迎在下方评论处留言。