簡介

當頁面往下滾動時,LOGO會自動移至左邊的效果,一般是少數佈景主題才會內建的效果,但在Elementor中我們也可以自行設計出來。

運用範圍

任何頁首(header)是用Elementor製作的網站都適用。

範例

如下圖,頁面一捲動則LOGO與選單的位置就產生變化。

原理與思路

作法有多種,本篇的作法是預先製作2組header模版,然後再透過一點jQuery小程式來控制切換。

實作

簡單分為幾個步驟:

1、使用Elementor Pro預先製作2組不一樣的header,並也調好響應式的版面。

2、套用全站每一頁。

3、加上片段jQuery與CSS偵側頁面滾動時就切換不同的header。

教學影片&程式碼

付費內容,需支付 : 700 個學習幣
您須先登入會員以使用學習幣與發問功能。

總結

這算是比較進階的作法,因須碰到jQuery片段程式碼,但上方教學已將個人經驗所筆記下來的程式碼整理出來,只要照做與貼上即可完成這樣的效果。