Question

我想问一下这是否可行，如果你能告诉我怎么做。这是我的事：我有一个div为logo3.png（大版本）和一个粘性导航栏右下角。

<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_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);
    }
});

你也可以查看这个小提琴。 jsfiddle

滚动时添加带动画的图像

1 个答案: