粘性菜单中的元素在滚动时被按下

Question

你好 :) 我有点想 post 在这里，但我已经无计可施了。

我正在为公司网站使用 wordpress 和主题 - Cake。

我正在尝试放置一个动态按钮以与粘性包装器中的 wordpress 菜单对齐 (.menu_wrapper)。无论我做什么 - 浮动、显示等 - 按钮在滚动时都会轻微跳跃。代码在正确的位置，但我无法将此按钮分配为与 wordpress 菜单项相同的 class - 这是一个限制（我认为）。我更愿意只用 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 - 这是红色的“登录”按钮。

我真的非常感谢任何人可以提供的帮助。谢谢 :)

Answer 1

您的问题是当您开始滚动时，初始值为 38px 的 margin-top 应更改为 13px。

滚动时需要在按钮上再添加一个class:

您可以使用 javascript 实现此目的：

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

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

然后在您的 css 中添加：

.login_button is .login_button .is-scrolling{

    margin-top: 13px !important;
}

粘性菜单中的元素在滚动时被按下

Element in sticky menu getting pushed down on scroll

html

css

wordpress

menu

sticky