Question

这是我的代码：

<header>
  <div class="sticky">
    <nav class="top-bar" data-topbar role="navigation">
      <!-- Blablabla -->
    </nav>
  </div>
</header>

这个版本的问题是当我第一次向下滚动时，粘性标题不起作用。我必须向下滚动，然后向上滚动到页面顶部，并在粘贴标题工作之后。

之后，我添加了固定<div class="sticky fixed">的课程，但是一旦页面加载，这会隐藏在页面顶部的元素而不是在它们之上。

所以我的解决方法是添加，然后在加载页面后删除类fixed。有了这个改变，标题在第一次滚动时变得粘稠，但它看起来不是完美的解决方案，它有副作用：/

$('header .sticky').addClass("fixed");
$('header .sticky').removeClass("fixed");

另一种解决方案是修复标题并将margin-top应用于所有元素。但是我们放弃了sticky类的好处。

想要更好的解决方案/找到问题的根源吗？

Answer 1

当您只需要使用.sticky时，听起来好像在使用.fixed。区别在于：

.fixed适用于topbar位于页面顶部的时间。
.sticky适用于topbar不在页面顶部的情况。

如果您的topbar从页面顶部开始，请使用：

<div class="fixed">
  <nav class="top-bar" data-topbar role="navigation">
    <nav class="top-bar" data-topbar role="navigation">
      <!-- Blablabla -->
    </nav>
  </nav> 
</div>

如果您的topbar从页面下方开始，请使用：

<div class="contain-to-grid sticky">
  <nav class="top-bar" data-topbar role="navigation" data-options="sticky_on: large">
    <!-- Blablabla -->
  </nav>
</div>

基础粘贴标题首先滚动

1 个答案: