Question

标题菜单中有一个按钮，标题包含徽标＆amp;社交媒体图标＆amp;那个按钮。

我想要修复该按钮，以便在滚动时始终位于屏幕顶部。

我们说我有以下HTML代码：

＆＃13;

.menu{background:#ddd}

.logo,
.social-media,
.sticky-container{
  display:inline-block;
  width:30%
}

.logo{background:#000}

.social-media{background:#080}

.sticky-container{background:#333}

.logo,
.sticky-container{color:#fff}

＆＃13;

<div class="main_container">
  <div class="wrapper">
    <div class="menu">
      <div class="logo">Logo</div>
      <div class="social-media">
        <div class="facebook">Facebook</div>
        <div class="youtube">Youtube</div>
        <div class="twitter">Twitter</div>
      </div>
      <div class="sticky-container">
        <a class="sticky-element">Button</a>
      </div>
    </div>
  </div>
</div>

＆＃13;

我希望sticky-element内的sticky-container类按钮是粘性的。

Answer 1

为position: fixed;课程设置sticky-container。

这里是jsfiddle：https://jsfiddle.net/30shhy3L/2/

修改

通过评论，正如您在https://logosperformance.com提到的真实网站一样，只需更改[data-css="tve-u-163a8211f58"]元素的css，如下所示：

[data-css="tve-u-163a8211f58"] { float: right; z-index: 3; position: fixed; margin-top: -2px !important; margin-bottom: 0px !important; }

如何修复容器内的按钮？

1 个答案: