隐藏可见性会隐藏图像，但仍会显示隐藏元素拍摄的 space

Question

当用户滚动经过 header(100vh) 中的徽标时，会出现一个固定的导航栏。（发生此切换的点是 220px 滚动顶部。）利用 javaScript 的 .visibility: hidden/visible，这在 jsfiddle

中按需工作

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

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

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

Answer 1

您可以在 javascript 中添加如下内容 document.getElementById('id').style.display='none';

希望对您有所帮助。

Answer 2

如果你用的是jQuery那么就不用写很长的核心代码了JavaScript.

$('#navig').hide();
$(window).scroll(function() {
    if ($(this).scrollTop() > 10) {
        $('#arr_downpoint').hide();

    }
    else {

        $('#arr_downpoint').show();
        $('#header').show();
        $('#navig').hide();

        if ($(this).scrollTop() > 220) {
            $('#header').hide();
            $('#navig').show();
        }
    }
});

Answer 3

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

与element.display=block|none;不同的是，它隐藏了元素并且还移除了space。

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

而且 nav 的问题也消失了，因为它在 header 里面。把它移出来应该没问题： https://jsfiddle.net/qz7531bu/63

隐藏可见性会隐藏图像，但仍会显示隐藏元素拍摄的 space

Hiding visibility hides image but still reveals space taken by hidden element

javascript

visibility

localhost