粘性菜單中的元素越來越被推下滾動

嗨:)我有點暗示要在這裏發帖，但我在我的智慧結束。粘性菜單中的元素越來越被推下滾動

我使用wordpress和一個主題 - 蛋糕 - 公司網站。

我想定位一個動態按鈕，以便與粘性包裝（.menu_wrapper）中的wordpress菜單對齊。無論我做什麼 - 浮動，顯示等 - 滾動時該按鈕稍微跳躍。代碼是在正確的地方，但我不能指定這個按鈕與wordpress菜單項相同的類 - 這是一個限制（我認爲）。我更希望能夠用CSS保持這一點。

我是一個自學成才，隨我學習，投入這個人，並盡我所能。我知道這個地方充滿了實際的編碼器和專家這就是爲什麼我伸手:)

爲.login_button的CSS是

.login_button { 
    display:inline !important; 
    margin-top: 38px !important; 
    float: left !important; 
    background:#e73f3a !important; 
    color:White !important; 
    font-family:roboto !important; 
    font-size:22px !important; 
    }

您可以在這裏打球看這個問題：https://netterrain.com - 紅色的登錄按鈕。

我真的很感謝任何人都可以提供的幫助。謝謝:)

來源

2017-02-18 Johannah

我會刪除！對他們來說很重要，當你嘗試覆蓋規則時，因爲你陷入了特殊的戰爭中，所以使用它並不理想。當您滾動時，具有Top_bar id的div會被分配一個「is-sticky」類，以便您可以有第二個規則，如下所示：'＃Top_bar.is-sticky .login_button {margin-top：12px; }'或者你想要它看起來，這將覆蓋它的默認38px。您也有自適應觸發器，因此您可能需要添加一些規則。希望能幫助你。 – PhilS

您的問題是，當您開始滾動時，其值爲38px的初始margin-top應更改爲13px。

您需要另一個類添加到該按鈕滾動時：

你可以做到這一點使用javascript：

// on scroll, 
$(window).on('scroll',function(){ 

     $('.login_button').addClass('is-scrolling'); 
});

而且在你的CSS補充一點：

.login_button is .login_button .is-scrolling{ 

    margin-top: 13px !important; 
}

來源

2017-02-18 19:23:52

工作得很漂亮！我非常感謝你的幫助，Yahya！謝謝！ – Johannah

Galdıt可以幫助:) –

粘性菜單中的元素越來越被推下滾動

回答

相關問題