Question

我有两个粘性导航栏，第一个来自Wordpress的白色导航器具有自己的粘性功能，下面的黑色导航栏是html/css-only（没有自举），它在移动设备上有一个奇怪的动作，这很难解释所以让我告诉你：

当我第一次加载页面时，看起来很像这样：

但是当我向下滚动时，即使只是一点点，黑色导航栏也会突然快速反弹并使内容“跳跃”。我不知道为什么会发生这种情况，因为从计算机加载webpage时没有错误！这只是手机问题。：S

jQuery(window).scroll(function () {
    if (jQuery(window).scrollTop() > 0) {
      jQuery('#navbar_reservas').addClass('navbar-fixed');
    }
    if (jQuery(window).scrollTop() <= 0) {
      jQuery('#navbar_reservas').removeClass('navbar-fixed');
    }
});

CSS

.navbar-fixed {
    top: 60px;
    z-index: 1000;
    position: fixed;
    width: 100%;
}

HTML

<div id="navbar_reservas">
    <div id="reservas_left">
        <div class="nav-item_reservas" id="inner_reservas_left">
              <a id="dudas" href="tel:55555555">
                    ¿Dudas?
                    <br />555 555 555                 </a>
        </div>
    </div>
    <div id="reservas_right">
        <div class="dropdown_reservas nav-item_reservas" id="inner_reservas_right">
          <div class="dropbtn">
            TOTAL
            <br /><span id="totalprice">0,00€</span>
            <i class="material-icons">arrow_drop_down</i>
          </div>
        </div>
    </div>
    <div class="dropdown-content_reservas" id="myDropdown">
        <ul id="dropul" class="unoul">
          <li id="drop2"></li>
          <li id="drop3"></li>
          <li id="drop4"></li>
          <li id="drop5"></li>
          <li id="drop6"></li>
        </ul>
    </div>
</div>

Answer 1

我可以看到，只有在position: fixed不是scrollTop时添加0。这将在应用类时创建新的堆叠上下文。这意味着它在定位方面不再对其周围的元素“可见”。因此，它下面的内容会跳起来填补空白。

如果你已经知道导航栏的高度，那么有一个非常简单的解决方案：

如果导航栏没有navbar-fixed类，请在其上应用position: absolute，使其始终位于自己的堆叠环境中。然后将导航栏的高度添加为顶部填充/边距到其下方的内容。

如果您不知道身高：

您需要执行与上面相同的操作，但在加载时使用JavaScript计算它的高度。如果它在调整大小时改变高度或者你有一些动态变化的内容，你需要确保在这些事件发生时更新上述方法的高度。

如果您可以使用相对较新的代码：

所有这些都有一个CSS属性！ position: sticky与top: 0结合使用会导致导航栏粘贴在屏幕顶部，否则会在视口后面向上滚动。

然而，浏览器支持不是很令人印象深刻： http://caniuse.com/#feat=css-sticky

Sticky navbar在移动设备上有一个错误

1 个答案: