Question

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

在桌面上，它确实有效并且看起来应该如何。但我得到了一个＆＃34;触摸＆＃34;移动视图问题。当我向下滚动移动视图时，在滚动浏览css类正在改变的视点的过程中，导航栏不会出现。它只会在我停止在该视点之后滚动时出现。当它出现时，我可以正常向上和向下滚动，如果我重复此过程，我只会再次遇到此问题，导航栏必须更改css类。所以它可能是css类更改的问题，我想问题可能在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

亲切的问候！

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

1 个答案: