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

【问题标题】：Hiding visibility hides image but still reveals space taken by hidden element隐藏可见性会隐藏图像，但仍会显示隐藏元素占用的空间
【发布时间】：2016-01-29 09:09:56
【问题描述】：

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

然而，在本地主机上，它可以工作，但是一旦导航栏出现在 220 像素，标题的其余部分（100vh 减 200 像素）在导航栏下方显示为白色（只有图像被隐藏）。可能是什么问题？

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

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

【问题讨论】：

你试过display: none/block吗？
试过了，还是不行。

标签： javascript localhost visibility

【解决方案1】：

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

和element.display=block|none;不同的是，它隐藏了元素，也去掉了空格。

我用display:none/block 改变了你的例子：https://jsfiddle.net/qz7531bu/62

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

【讨论】：

谢谢，但是当我在导航栏上使用它时，它不起作用，即。导航栏根本没有出现：jsfiddle.net/qz7531bu/59
@AgniScribe 啊，我明白了。问题是因为您的nav 位于header 一侧。当您隐藏header 时，导航消失。只需将nav 移出标题即可解决问题。 jsfiddle.net/qz7531bu/63
谢谢，它现在对我有用（尽管小提琴有一些问题：jsfiddle.net/qz7531bu/59）。在我的本地主机上，导航栏出现在 220 像素之后，但它在出现之前又跳了 400 像素？有什么想法吗？（很抱歉这样打扰你）

【解决方案2】：

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

希望这会有所帮助。

【讨论】：

增加了很多不一致，最终不起作用

【解决方案3】：

如果您使用的是 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();
        }
    }
});

【讨论】：

导航根本没有显示：jsfiddle.net/qz7531bu/61/。另外，我本来想使用 jquery，但它干扰了使用 jquery 的其他代码块，尽管使用了$j=jQuery.noConflict();
您刚刚要求隐藏图像。所以我做到了。
不，我的问题是图像被隐藏了，但它占用的空间仍然存在（显示为空白）