0

我想问这是否可能，如果你能告诉我怎么做。这是我的事情：我有一个用于 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_small.png）添加到导航栏的左侧。请帮忙？

提前致谢！

4

1 回答 1

0

我可以看到您正在使用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

于 2013-11-04T07:33:29.460 回答