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

Posted 2023-03-05

【中文标题】粘性菜单中的元素在滚动时被按下

【英文标题】：Element in sticky menu getting pushed down on scroll

【发布时间】：2017-07-08 05:03:21

【问题描述】：

嗨 :) 我有点想在这里发帖，但我无能为力。

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

我正在尝试定位一个动态按钮以与粘性包装器 (.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 - 这是红色的登录按钮。

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

【问题讨论】：

我会删除它们上的 !important，当您尝试覆盖规则时，当您陷入特异性战争时，使用它并不理想。当您滚动时，ID 为 Top_bar 的 div 会被分配一个 is-sticky 类，因此您可以有第二条规则，例如：#Top_bar.is-sticky .login_button margin-top: 12px; 或者您希望它看起来如何，这将覆盖它具有的默认 38px .您也有响应式触发器，因此您可能需要添加一些规则。希望对您有所帮助。

【参考方案1】：

您的问题是，当您开始滚动时，初始值为 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;

【讨论】：

工作得很好！我非常感谢你的帮助，叶海亚！谢谢！

Gald 可以帮上忙 :)