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

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

本文关键字：隐藏 空间 元素 可见性 图像 显示      更新时间：2023-09-26

当用户滚动到标题（100vh）中的徽标时，会出现固定的导航栏。（此切换发生的点是 220px 滚动顶部。利用javaScript的.visibility: hidden/visible，这在jsfiddle中可以根据需要工作

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

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

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

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

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

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

还有nav消失的问题，因为它在header里面。 只需将其移出即可：https://jsfiddle.net/qz7531bu/63

你可以在javascript中添加如下内容 document.getElementById（'id'）.style.display='none';

希望这有帮助。

如果你使用的是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();
        }
    }
});
相关文章：