粘性菜单中的元素越来越被推下滚动

嗨:)我有点暗示要在这里发帖，但我在我的智慧结束。粘性菜单中的元素越来越被推下滚动

我使用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可以帮助:) –

粘性菜单中的元素越来越被推下滚动

回答

相关问题