Question

我的网站上有一个固定的顶栏/导航栏，在中心我有一个徽标。我希望这个徽标在用户访问页面时以隐藏的方式开始。当用户向下滚动（大约200像素）时，我希望此徽标淡入。当它们向上滚动到顶部时，我希望徽标淡出。

这是我现在正在使用的脚本：

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

有两个问题：

1）徽标右侧的导航栏也是以隐形和淡入的方式开始，虽然我不想要它（它没有id = logo）。我不确定为什么会这样。

编辑：我发现这种情况正在发生，因为#logo css必须设置为display：none才能使fadeIn正常工作。这会抛弃格式化。我想使用visibility：hidden而不是javascript由于某种原因不适用于此。仍未解决，但有关该问题的更多信息。

2）当我向上滚动时，徽标没有淡出。我知道我需要使用fadeOut函数，但是当我尝试基本上反转fadeIn函数时，我得到了一些时髦的结果。

这是我的网站网址：http://bestdressedghetto.com/displayPosts.php

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

<header>

<center><a href="displayPosts.php" id="logo">
  <img class="img-responsive" src="images/bdg-logo-floral.png" />
</a></center>

<nav style="display:block">

<a style="font-size:30px; position: relative; top: -5px;" href="#" id="menu-icon"></a>

<ul>

<li><a class="nav-link" href="#">About</a></li>
<li><a class="nav-link" href="displayTapes.php">Tapes</a></li>
<li><a class="nav-link" href="#">Subscribe</a></li>
<li><a class="nav-link" href="#">Contact</a></li>

</ul>

</nav>

</header>

非常感谢任何和所有帮助！

Answer 1

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

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

Answer 2

可以像这样逐渐淡出

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


nav{opacity:0;}

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

2 个答案: