滚动时粘性导航栏在移动设备上不起作用

Question

我为子导航创建了一个粘性导航栏，当用户向下滚动时它应该粘在屏幕顶部。因此，我尝试了一些 javascript，当到达顶部时，它会将位置更改为 'fixed'。当导航栏从流中取出时，为了避免内容出现间隙，我还添加了一个占位符，它与导航栏具有相同的高度。

在台式机上它确实有效并且看起来应该是这样。但是我在移动视图上遇到了 "touch" 问题。当我在移动视图上向下滚动时，导航栏不会在滚动视点的过程中出现，其中 css class 正在发生变化。只有当我在该视点后停止滚动时它才会出现。当它出现时，我通常可以上下滚动，如果我重复这个过程，我只会再次遇到这个问题，导航栏必须更改 css class。所以这可能是 css class 更改的问题，我猜问题可能出在 javascript 片段中。有人知道这个的解决方案吗？我希望在桌面视图中具有相同的行为，因此导航栏始终可见并且固定在屏幕的最顶部，即使它处于滚动过程中也是如此。

JS:

var menu = document.querySelector('#irp-localnav');
var menuPosition = menu.getBoundingClientRect();
var placeholder = document.createElement('div');
placeholder.style.width = menuPosition.width + 'px';
placeholder.style.height = menuPosition.height + 'px';
var isAdded = false;

window.addEventListener('scroll', function() {
if (window.pageYOffset >= menuPosition.top && !isAdded) {
    menu.classList.add('sticky');
    menu.parentNode.insertBefore(placeholder, menu);
    isAdded = true;
} else if (window.pageYOffset < menuPosition.top && isAdded) {
    menu.classList.remove('sticky');
    menu.parentNode.removeChild(placeholder);
    isAdded = false;
}
});

如果您猜到 html/css 标记有误，请告诉我，我会通过发布此标记再次与您联系

亲切的问候

Answer 1

我能够四处游荡。对于面临类似问题的任何人：

移动浏览器根本不会在滚动事件上触发，而该事件正在处理中。它们在事件停止时触发，因此，当您停止滚动时。使用 translate3d(0px,0px,0px) 可以解决这个问题。请参阅此线程以了解更多相关信息：

iOS 9 Safari: changing an element to fixed position while scrolling won't paint until scroll stops

亲切的问候！

滚动时粘性导航栏在移动设备上不起作用

sticky navbar does not work on mobile while scrolling

javascript

navbar

sticky