Sticky Menu (or Anything!) on Scroll – WordPress plugin 外掛推薦下載

點擊下載

滾動屏幕上的粘滯菜單(或任何內容!)

外掛Plugin描述

概要

粘性菜單(或任何內容) )在WordPress的Scroll外掛Plugin中,當您向下滾動時,只要它點擊頁面頂部,就可以使頁面上的任何元素“粘滯”。雖然這通常用於將菜單保留在頁面頂部,但外掛Plugin允許您將任何元素設置為粘性(例如“操作號召喚”框,徽標等)

一點點基本需要HTML / CSS知識。您只需要知道如何為要粘貼的元素選擇正確的選擇器,並且您需要確保它是一個獨特的選擇器。有時一個簡單的選擇器,如“nav”,“#main-menu”,“。menu-main-menu-1”就足夠了。其他時候你必須更詳細,並使用更具體的選擇器,如“標題> ul:first-child“或”nav.top .menu-header ul.main“。

產品特點

任何元素都可以粘貼:雖然常用於導航菜單,但該外掛Plugin會讓您選擇任何帶有名稱,類或ID的獨特元素。滾動瀏覽後,頁面頂部。將其用於側邊欄,號召性用語框,橫幅廣告等。從頂部定位:可選地,您可以在粘性元素和頁面頂部之間添加任意數量的空間,以便元素並不總是卡在頁面的“天花板”上。 僅對某些屏幕尺寸啟用:您可以選擇設置粘性應該起作用的最小和/或最大屏幕尺寸。如果您有一個響應式網站,並且您不希望您的元素在較小的屏幕上粘滯,這可能很方便。 俯臥撑元件:可選擇地,您可以選擇頁面下方的任何其他元素來推送h再次粘貼元素(例如側邊欄小部件)。 管理欄感知:檢查當前用戶是否在頁面頂部有管理工具欄。如果有,粘性元素不會遮擋它(或被它遮擋)。 Z-index :如果頁面上有其他元素隱藏或窺視您的粘性元素,您可以輕鬆添加Z索引。 傳統模式:在2.0中,引入了一種新的粘性方法。在舊版模式下,將使用舊方法。請參閱FAQ以獲取詳細信動態模式:通過添加動態模式(僅限傳統模式)解決了響應主題中經常出現的一些問題。請參閱FAQ以獲取詳細信調試模式:通過打開調試模式找出元素不粘的可能原因,錯誤消息將出現在瀏覽器的控制台中。

屏幕截圖

基本設置屏幕
高級設置屏幕

安裝

將“sticky-menu-or-anything”目錄上傳到“wp-content / plugins”目錄。在WordPress管理員中,轉到PLUGINS並激活“粘滯菜單”(或什麼!)“轉到設置 – 粘貼菜單(或任何東西!)選擇你想要粘貼的元素!

FAQ

安裝說明將“sticky-menu-or-anything”目錄上傳到“wp-content / plugins”目錄。在WordPress管理員中,轉到PLUGINS並激活“Sticky Menu(或Anything!)”轉到SETTINGS – STICKY MENU(或任何東西!)選擇你想要製作stickyParty的元素!我在設置屏幕中選擇了一個類/ ID,但是當我向下滾動時元素不會粘住。為什麼不?

首先,確保如果按類名選擇元素,它前面有一個點(例如“.main-menu”),如果你通過它的ID選擇它,它前面有一個井號/井號/數字符號(例如“#main-menu”)。此外,請確保頁面上只有一個元素與您正在使用的選擇器。如果沒有,或者多個元素與您的選擇器匹配,則不會發生任何事情。

一旦元素變粘,它就不會正確定位/調整大小。

由於CSS的性質,有些情況下元素不能正確粘貼,通常如果它具有用於操縱其位置和/或尺寸的特定屬性。如果您的粘性元素具有以下任何屬性,則可能會導致衝突:

負邊距絕對定位/左/底/右屬性“display:inline”“!important”應用於其任何屬性

盡量避免所有這些盡可能,但如果你不能,在傳統模式下使用外掛Plugin(見下文)有時會有所幫助。
另一種可能導致麻煩的情況是,粘性元素的任何父元素都應用了“transform”CSS屬性。

一旦元素變粘,它就沒有響應,並且在我更改瀏覽器大小時不會調整大小。

這是外掛Plugin中的一個已知(且令人煩惱)的錯誤,我還沒能正確解決。對於某些網站(當元素通常不包含任何Javascript交互性時),有時在傳統模式下使用該外掛Plugin會有所幫助(見下文)。

是否可以在元素中添加一些樣式,但只有在粘性時?

要在粘性元素不粘時添加樣式,請使用classname“.element-is-not-sticky”。
要僅在粘性元素粘滯時添加樣式,請使用classname“.element-is-sticky”

以下代碼將為您的元素添加紅色背景只有當它不粘時才會圓,而只有當它是藍色時才會變圓:

。元素不粘… {123>背景:紅色;
}

.element-is-sticky {

背景:藍色;
}
一旦元素變得粘稠,就會有一個短暫的時刻,你會看到它兩次。

如果您在傳統模式下使用該外掛Plugin(見下文),則當粘性元素(或其任何內容)應用了CSS轉換時會發生這種情況。因為原始元素變得不可見(並且它的克隆副本變得可見),所以可見 – 不可見的狀態變化將發生轉換(即,不是立即)。刪除元素具有的任何轉換,或嘗試禁用傳統模式。

我的菜單很棒,但當它處於粘性狀態時,它不會在響應式主題上打開。

這是2.0版之前的版本中的一個錯誤,與主題不兼容。它已在2.0中修復,但在傳統模式下,此錯誤仍然存在。如果由於某種原因需要啟用傳統模式,最好關閉移動菜單的粘性(設置“當屏幕小於:時不要粘貼元素”到651像素)。

我有另一個名為Easy Smooth Scroll Links的外掛Plugin,但是一旦我的菜單變得粘稠,那個就不再起作用了。

這是2.0之前的版本中的一個錯誤,與外掛Plugin不兼容。它已在2.0中修復,但在傳統模式下,此錯誤仍然存在。如果由於某種原因需要啟用傳統模式,則無法修復此錯誤,但是有另一種解決方法。根據有這個問題的用戶的報告,一個名為Page Scroll To ID的外掛Plugin是Easy Smooth Scroll Links的一個有價值的替代品,並且可以在傳統模式下使用Sticky Anything外掛Plugin。

仍然無效。可能有什麼不對?

檢查外掛Plugin設置中的“調試模式”複選框。重新加載頁面和您可能會在瀏覽器的控制台窗口中看到錯誤。如果您使用了不存在的選擇器,或者頁面上有更多選擇器,您將在控制台中收到通知。

是否可以有多個粘性元素?

當前版本僅允許一個粘性元素,但此功能將在下一個主要版本中實現。但是沒有預期的發布日期。

什麼是傳統模式?我應該用嗎?

在外掛Plugin的2.0版本中,引入了一種新的/更好的使元素變粘的方法。在此之前,粘性元素基本上是原始元素的克隆副本。現在,元素本身變得粘稠,不再使用複制和克隆,這解決了很多問題。

那麼,你是否應該使用它?好吧,如果您從早期版本升級此外掛Plugin,默認情況下將啟用傳統模式,因為舊方法可能對您的網站完全正常。如果是這種情況,則根本不需要使用新方法,您可以繼續使用舊的經典方法。如果它沒有壞掉,請不要修理它,對吧?

話雖如此,值得檢查你的元素是否與傳統模式關閉一樣好,因為這是“更好”的方法。試試看吧。如果它不起作用,您可以隨時返回並再次啟用它。

注意:默認情況下,新安裝的外掛Plugin將關閉傳統模式。只有1.4(或之前)的UPGRADES默認情況下才會啟用它。

這種動態模式到底是什麼?

此模式僅在傳統模式下可用,為了正確解釋這一點,我們需要更深入地了解外掛Plugin的功能。所以忍受我…

在傳統模式中,當一個元素在頁面頂部變粘時(並保持其位置而不管滾動),它實際上不是你看到的元素本身,而是它的克隆副本,而執行原始元素是不可見的和不可見的。

原始元素始終保留在頁面上最初的位置,而克隆元素始終位於瀏覽器視口屏幕的頂部。但是,你永遠不會同時看到它們;根據您的滾動位置,它總是只顯示一個或另一個。

在原始外掛Plugin版本中,將在您加載頁面時立即創建克隆(但不會立即顯示)。然後,當您向下滾動時,它將變為可見(並粘在頂部),而原始元素將從視圖中消失。

但是,有些主題使用JavaScript動態創建移動網站的元素(主要是菜單)。使用此方法,加載頁面時HTML源代碼中不存在菜單,但是在頁面完全加載後的某個時間創建菜單 – 在許多情況下,這些菜單只會在屏幕更多時生成(或者比某個特定寬度更小。使用外掛Plugin的原始版本,問題是原始元素(您想要粘貼)可能在頁面加載時未完全創建,因此克隆也不能完全正常運行。

進入動態模式。現在,在頁面加載時不會創建元素的克隆 – 相反,它僅在用戶滾動並點擊“粘滯”點時創建。這可以確保克隆元素是原始元素在該特定時間點所包含的實際的1對1副本(而不是“頁面加載”點,如果元素自此更改後可能會有所不同)。

為什麼我們不一直使用動態模式?這與其他外掛Plugin在頁面加載時初始化並可能需要完整標記(包括clo)有關在那一點上。在動態模式下,頁面加載時沒有可用的克隆,因此如果其他外掛Plugin正在查找尚不存在的元素,則可能會導致問題。

(這可能聽起來非常令人困惑。事實就是如此!因此,做了很多工作來修復這個廢話:從外掛Plugin的v2.0開始,一個完全不同的方法被用來使元素變得粘稠,並且動態模式甚至不再是問題。)

P!

我需要更多的幫助!

請訪問WordPress.org

上外掛Plugin的支持論壇並發布消息(如果可能,請附上指向您網站的鏈接)。反應時間通常在幾個小時內。 我需要一些外掛Plugin目前不支持的功能。你能幫忙製作一個自定義版本嗎?

如果定制很小,我可能馬上幫忙。但是,如果請求的定制更加複雜,我將無法快速/免費進行,可能需要數小時。如果您對此感興趣,請訪問WordPress.org

上的外掛Plugin的支持論壇,並告訴我您需要一些自定義工作(如果可能,請包含指向您網站的鏈接)。

評論

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

shares