0

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

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

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

有两个问题：

1) 徽标右侧的导航栏也开始不可见并逐渐淡入，尽管我不希望它这样做（它没有 id=logo）。我不确定为什么会这样。

编辑：我发现这种情况正在发生，因为必须将#logo css 设置为 display:none 才能使淡入淡出工作。这会导致格式化。我想改用可见性：隐藏，但由于某种原因，javascript 不能使用它。仍未解决，但有关此问题的更多信息。

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

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

这是相关 topBar 代码的片段（它是一个 php 文件，包含在所有应该有 top-bar 的页面中......上面的 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>

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

4

2 回答 2

0

希望我对您的理解正确...如果您希望徽标在您向上滚动后淡出，您需要将以下内容添加到您的脚本中。

$(document).ready(function(){
    $(window).scroll(function(){
        if($(this).scrollTop() > 100){
          $('#logo').fadeIn(1000);   
        } else {
          $('#logo').fadeOut(1000);
        }
    });
});
于 2013-08-21T02:41:08.877 回答
0

可以像这样逐渐淡入

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


nav{opacity:0;}
于 2015-01-12T11:42:25.240 回答