gpt4 book ai didi

javascript - 粘性导航栏在移动设备上存在错误

转载 作者:太空宇宙 更新时间:2023-11-04 08:01:55 26 4
gpt4 key购买 nike

我有两个粘性导航栏,第一个来自 Wordpress 的带有粘性功能的白色导航栏,下面的黑色导航栏是 html/css-only(无 Bootstrap ) , 而且它在手机上有一个奇怪的 Action ,很难解释所以让我告诉你:

当我第一次加载页面时,它看起来像这样:

但是当我向下滚动时,即使只是一点点,黑色导航栏也会突然快速地弹起,使内容“跳跃”。我不知道为什么会这样,因为从计算机加载 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>

最佳答案

据我所知,当 scrollTop 不是 0 时,您只添加 position: fixed。这将在应用该类时创建一个新的堆栈上下文。这意味着它在定位方面将不再对周围的元素“可见”。因此,它下面的内容会跳起来填补空白。

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

当导航栏没有 navbar-fixed 类时,应用 position: absolute 使其始终处于自己的堆叠上下文中。然后将导航栏的高度作为顶部填充/边距添加到它下面的内容中。

如果您不知道高度:

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

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

所有这些都有一个 CSS 属性! position: sticky 结合 top: 0 将使导航栏粘在屏幕顶部,否则它会向上滚动到视口(viewport)后面。

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

关于javascript - 粘性导航栏在移动设备上存在错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46943186/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com