Question

当用户滚过标题（100vh）中的徽标时，会出现固定的导航栏。（此切换发生的时间点为220px scrolltop。）使用javaScript的.visibility: hidden/visible，这可以在jsfiddle

中按需使用

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

localhost上的代码与小提琴中的代码完全相同。没有控制台错误。

还要添加我没有使用jquery，因为尽管使用jQuery.noConflict();它会导致与使用jquery的其他项冲突。

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

Answer 2

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

希望这有帮助。

Answer 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();
        }
    }
});

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

3 个答案: