javascript - 滚动时添加带有动画的图像

Question

我想问问这是否可行，您能否告诉我如何实现。这是我的东西:我有一个 logo3.png(大版本)的 div 和一个粘性导航栏右下部分。

http://jsfiddle.net/34Qw5/

<div id="logo_container">
<center><img src="images/Logo3.png" alt="My Company"/></center>
</div>
<div id="header_navi">
    <table width="50%" border="0">
      <tr>
        <td><a href="#"><img class="home_navi" data-alt-src="images/home_over.png" src="images/home.png" /></a></td>
        <td><a href="#"><img class="portfolio_navi" data-alt-src="images/portfolio_over.png" src="images/portfolio.png" /></a></td>
        <td><a href="#"><img class="quote_navi" data-alt-src="images/get_a_quote_over.png" src="images/get_a_quote.png" /></a></td>
        <td><a href="#"><img class="careers_navi" data-alt-src="images/careers_over.png" src="images/careers.png" /></a></td>
      </tr>
    </table>
</div>

当我向下滚动并且导航栏到达顶部时，它将被粘在顶部并且大 Logo 将被隐藏，这工作正常。现在，我想要做的是当导航栏到达顶部时，我希望将我的 Logo (logo_small.png) 的小版本添加到导航栏左侧。帮忙，好吗？

提前致谢!

Answer 1

我可以看到你正在使用 Sticky Plugin但是那里没有回调，您可能不想弄乱它。我建议您放弃该插件并仅使用 jQuery 创建您自己的便签。

如果你只是想用一些顶部间距粘住你的导航栏(类似于这个选项 .sticky({topSpacing:10});)并显示/隐藏小标志，我想这样做:

var nav = $('#nav');
var smallLogo = $('#logo-small');
var navPos = nav.offset().top;
var topSpacing = 10;

$(document).scroll(function(){
    var scrollTop = $(this).scrollTop();

    if(scrollTop >=  navPos){
        nav.css({'position':'fixed','top':topSpacing});
        smallLogo.fadeIn(500);
    }else {
        nav.css({'position':'static'});
        smallLogo.fadeOut(500);
    }
});

您也可以查看此 fiddle 。 jsfiddle