Javascript 如何在滚动时增加图像的不透明度？

我在我的网站上有一个固定顶栏/导航栏，中间有一个徽标。我想这个标志开始时，作为隐藏的用户来到页面。当用户向下滚动（大约200像素）时，我希望这个徽标淡入。当他们向上滚动到顶部时，我希望徽标淡出

下面是我现在使用的脚本：

<script>
$(document).ready(function(){
    $(window).scroll(function(){
        if($(this).scrollTop() > 100){
             $('#logo').fadeIn(1000);   
        }
    });
});
</script>

$（文档）.ready（函数（）{
$（窗口）。滚动（函数（）{
如果（$（this）.scrollTop（）>100）{
$（“#logo”）.fadeIn（1000）；
}
});
});

有两个问题：

1） 徽标右侧的导航栏也开始不可见并逐渐消失，尽管我不希望这样（它没有id=logo）。我不知道为什么会这样

编辑：我发现这是因为#徽标css必须设置为display:none才能使fadeIn工作。这会破坏格式。我想改为使用visibility:hidden，但由于某些原因javascript不能使用它。仍然没有解决，但是关于这个问题的更多信息

2） 当我向上滚动时，徽标不会褪色。我知道我需要使用fadeOut函数，但当我尝试基本上反转fadeIn函数时，我得到了一些令人毛骨悚然的结果

以下是我的网站url：

下面是一段相关的topBar代码（它是一个php文件，包含在所有应该有顶栏的页面中……上面的javascript代码在displayPosts.php中）：

---

非常感谢您的任何帮助

希望我能正确地理解你。。。如果您希望在向上滚动后徽标淡出，则需要在脚本中添加以下内容

$(document).ready(function(){
    $(window).scroll(function(){
        if($(this).scrollTop() > 100){
          $('#logo').fadeIn(1000);   
        } else {
          $('#logo').fadeOut(1000);
        }
    });
});

---

可以像这样逐渐淡入

headerFade = function() {
    var maxScrollDistance = 200;
    $(window).scroll(function() {
        var percentage = $(document).scrollTop() / maxScrollDistance;
        $('nav').css('opacity', percentage);
    });
}
headerFade();


nav{opacity:0;}

---

。。。。。shutterHaha@Ohgoodwhy。。。无论如何，有一个帮助是，

标记在HTML4:@kunalbhat-Hah之后已经被弃用了。是的，我想那会来的。这方面有点新手。抱歉，还有一个问题，但在您的体验中，将内联图像居中的最佳方式是什么？自动边距技巧似乎只适用于块元素到您的

标记（因为它不是默认的），并使用您的

边距：0自动以使其居中（只要具有固定宽度）。我建议从标记中删除图像（这可能有争议，但我不认为“图像”是内容，因此您可以安全地将其保存在CSS中，作为
标记的背景。@kunalbhat没关系…解决了这个问题。（将图像/链接包装在标记中，并使用文本对齐：居中）谢谢！这很好用。我仍然对显示有意见：但是没有。因为这会丢掉格式，这会使导航栏中的链接看起来不可见）。我想使用visibility:hidden而不是display:none，这样#logo就可以在它不在的时候保持它的位置……但是这个javascript似乎不允许我这样做。有什么想法吗？你的链接看起来像是你去的！如果你认为这有点帮助的话，请随意投票。是的，我刚刚收到。不幸的是，我还不能升级，因为我没有足够的声誉：（对不起。有没有办法让javascript只在桌面上运行，而不是在移动设备上运行。基本上是在javascript上使用@media标记？我正试图处理不同的元素并通过CSS操纵它们，但想知道是否有更简单的方法？（JS不太好）
headerFade = function() {
    var maxScrollDistance = 200;
    $(window).scroll(function() {
        var percentage = $(document).scrollTop() / maxScrollDistance;
        $('nav').css('opacity', percentage);
    });
}
headerFade();


nav{opacity:0;}