在移动设备上滚动时顶部和底部的空白

Question

我正在建立一个新网站，在滚动时我想将导航栏固定在顶部。它可以工作，但是在移动设备上滚动时，顶部或底部会有空白。问题是，我的手机导航来自左侧。当我滚动时，此导航不会移动，顶部导航栏不会在左侧导航栏下方，并且它确实很难看。

如果您不了解https://www.hytalefrance.net

，这是我的网站

我尝试过这样的事情：

overscroll-behavior: none;

但是它什么也没改变

body {
  height: 100%;
  overflow: auto;
}

什么都不做

这是一个经典的bootstrap 4导航栏，但我不使用固定顶部的类来使其固定，这是一个类似于固定顶部的自定义类

.sticky.is-sticky {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 1000;

}

我希望手机上的空白消失。

在我的手机（iPhone 6）上拍摄的一些屏幕截图

我实际上正在向下滚动：

打开导航栏时：

在打开导航栏时滚动：

Answer 1

我想您正在考虑由于过度滚动iPhone中的网页而导致的惯性滚动行为。没有理想的解决方案。

在您的情况下，几乎没有部分解决方案可能会/可能不会起作用
-How to disable inertial scrolling on body for iOS browsers?
-ipad safari: disable scrolling, and bounce effect?

但是，不建议阻止它。这样做将拦截浏览器中自然的滚动平滑度。

我建议您将身体的背景颜色设置为导航栏的确切bg颜色，以使其不那么明显

Answer 2

我通过删除js函数解决了该问题。在台式机上导航栏不会被修复，在移动设备上，导航栏现在可以直接修复，并且可以正常工作