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

2020年7月8日09:09:16 评论 70
摘要

使用sticky-header.js可以实现固定顶部导航或者右栏的功能,即吸顶效果,Sticky Menu (or Anything!) on Scroll 是一个基于 sticky-header.js 的 wordpress 插件,利用它可以轻松实现吸顶效果。

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 Menu (or Anything!) on Scroll 插件实现吸顶效果

结束语

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

本文已通过「原本」原创作品认证,未经作者授权请勿直接转载,负责将依法追究其法律责任。
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: