横幅落下后，删除徽标

Question

就像现在一样，我的网站在左上角有一个徽标。这由 HTML

中的 img 标记指定

现在，当用户向下滚动时，会显示一个横幅，如 CSS #header.reveal

所示

目标是在条形显示后缩小图像。

我正在尝试通过将 background-image 添加到我的 css 中使用相同的图像来实现这一点，只是比例更大。然后通过尝试在 SwoleCakesPicLogo ID

上使用 content:none; 来删除 img 标签

但如您所见，我尝试这样做，但现在两张图片都在那里，大的正好覆盖小的。

如果你们知道我如何在显示条形图后删除更大的图像，那就太好了

这是我的 css

#header.reveal {
    -moz-animation: reveal-header 0.5s;
    -webkit-animation: reveal-header 0.5s;
    -o-animation: reveal-header 0.5s;
    -ms-animation: reveal-header 0.5s;
    animation: reveal-header 0.5s;
    background-image:url(../images/Swole-Cakes-LogoText.png), url(../images/SwoleCakesText.png);
    background-size: 3%, 15%;
    background-repeat:no-repeat, no-repeat;
    background-position:5%, 50%, 50%, 50%;
}

#header.reveal #SwoleCakesPicLogo

{
    content:none;   
}

我也试过用display:none;替换content:none;。当我这样做时，更大的图像从一开始就根本没有出现。

这是我的 HTML

<header id="header" class="alt">
  <h1 id="logo"><a href="#index" class="scrolly"><img id="SwoleCakesPicLogo" src="images/Swole-Cakes-LogoText.png" alt="SwoleCakesLogo" style="width:10%;"/></a></h1>
</header>

Answer 1

我不确定我是否理解您要完成的任务。如果您想在向下滚动后隐藏纸杯蛋糕，可以在紧要关头使用 javascript 来完成（使用 jQuery）：

$(window).scroll(function (event)
{
    if ($(this).scrollTop() > 0)
    {
        // If the user is no longer at the top of the page, hide the cupcake
        $("#SwoleCakesPicLogo").hide();
        // Show the small cupcake here...
    } else
    {
        // If the user returns to the top of the page, show the cupcake
        $("#SwoleCakesPicLogo").show();
        // Hide the small cupcake here...
    }
});

然而，这看起来非常跳跃和丑陋。实际上，您可以像这样 和动画 更改纸杯蛋糕的大小：

var factor = 2;
$(window).scroll(function (event)
{
    if ($(this).scrollTop() > 0)
    {
        // Shrink the cupcake
        $("#SwoleCakesPicLogo").animate({
            top: '+=' + $(this).height() * factor,
            left: '+=' + $(this).width() * factor,
            width: $(this).width() / factor
        });
    } else
    {
        // Grow the cupcake
        $("#SwoleCakesPicLogo").animate({
            top: '-=' + $(this).height() / factor,
            left: '-=' + $(this).width() / factor,
            width: $(this).width() * factor
        });
    }
});

这是 sudo 代码。不要只是复制和粘贴它。我还没有测试过。自己写或者修改。 此代码可以很容易地适应您要完成的任务。请参阅 jQuery Documentation 寻求帮助。

Answer 2

尝试隐藏 img：

 visibility: hidden;

横幅落下后，删除徽标

Once banner drops down, remove logo

html

css

image