Question

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

中的img标记指定

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

指示

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

我正在尝试通过向我的css添加background-image来使用相同的图片，只是更大的百分比。然后尝试在img ID

上使用content:none;删除SwoleCakesPicLogo代码

但正如你所看到的，我试图这样做，但现在两个图像都存在，较大的图像只覆盖较小的图像。

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

这是我的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;   
}

我也尝试用content:none;替换display: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-code。不要复制＆amp; amp;粘贴它。我还没有测试过它。编写或修改自己的。 此代码可以轻松地适应您尝试完成的任务。请参阅jQuery Documentation获取帮助。

Answer 2

尝试隐藏img：

 visibility: hidden;

横幅下降后，删除徽标

2 个答案: