html - 横幅落下后，删除 Logo

Question

就像现在一样，我的网站在左上角有一个 Logo 。这是由 HTML 中的 img 标记指定的

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

所示

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

我正在尝试通过向我的 css 添加一个 background-image 来实现这一点，该图像具有相同的图像，只是比例更大。然后通过尝试在 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寻求帮助。