使用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-header.js 這個 JS 文件。如果有任何意見或建議,歡迎在下方評論處留言。