javascript - 隐藏可见性会隐藏图像，但仍会显示隐藏元素占用的空间

Question

当用户滚动经过标题中的 Logo (100vh) 时，会出现固定的导航栏。 (此切换发生的点位于 220px 滚动顶部。)利用 javaScript 的 .visibility: hide/visible，这可以按照 jsfiddle 中的要求工作。

但是，在本地主机上，它可以工作，但是一旦导航栏出现在 220 像素处，标题的其余部分(100vh 减去 200px)将在导航栏下方显示为白色(仅隐藏图像)。可能是什么问题？

本地主机上的代码与 fiddle 中的代码完全相同，并且没有控制台错误。

还想补充，我没有使用 jquery，因为它会导致与使用 jquery 的另一个项目发生冲突，尽管使用 jQuery.noConflict();。

Answer 1

这就是 element.visibility=visible|hidden; 所做的。它使对象不可见但保留空间。

与 element.display=block|none; 不同，它隐藏元素并删除空格。

我用 display:none/block 更改了您的示例:https://jsfiddle.net/qz7531bu/62

而且 nav 的问题也消失了，因为它位于 header 内部。只要把它移出去就应该没问题: https://jsfiddle.net/qz7531bu/63