簡介
當頁面往下滾動時,LOGO會自動移至左邊的效果,一般是少數佈景主題才會內建的效果,但在Elementor中我們也可以自行設計出來。
運用範圍
任何頁首(header)是用Elementor製作的網站都適用。
範例
如下圖,頁面一捲動則LOGO與選單的位置就產生變化。

原理與思路
作法有多種,本篇的作法是預先製作2組header模版,然後再透過一點jQuery的捲動事件來控制切換。
實作
簡單分為幾個步驟:
1、使用Elementor Pro預先製作2組不一樣的header,並也調好響應式的版面。
2、套用全站每一頁。
3、加上片段jQuery與CSS偵側頁面滾動時就切換不同的header。
教學影片&程式碼
付費內容,需支付 : 700 個學習幣
您須先登入會員以使用學習幣與發問功能。總結
這算是比較進階的作法,因須碰到jQuery片段程式碼,但上方教學已將個人經驗所筆記下來的程式碼整理出來,只要照做與貼上即可完成這樣的效果。