向下滚动淡入

时间:2014-05-16 18:31:32

标签: jquery twitter-bootstrap-3

我想在用户滚过横幅时尝试淡入导航栏徽标。由于冗余,我不想同时在两个地方展示标识。导航栏使用Bootstrap 3.1制作。这就是我现在所做的那样,当我滚动它时,导航棒就会粘住它:

$('#nav').affix({
      offset: {
        top: $('header').height()-$('#nav').height()
      }
}); 

$('body').scrollspy({ target: '#nav' })

$('.scroll-top').click(function(){
  $('body,html').animate({scrollTop:0},1000);
})

$('#nav .navbar-nav li>a').click(function(){
  var link = $(this).attr('href');
  var posi = $(link).offset().top+20;
  $('body,html').animate({scrollTop:posi},700);
})

我的问题是;当scrolllspy命中目标#nav时,如何使用HTML id of "navbarlogo"修改这段代码以淡入图像(快速)?我对此都很陌生。

请,谢谢你。

1 个答案:

答案 0 :(得分:0)

你应该在你的问题中提到你正在使用jQuery以及你使用哪些插件来让其他人更容易确定这个问题是否可以解决并回答它们。

话虽如此,如果您使用John Smarts Scrollspy plugin,那么您可以这样写:

$('#nav').on('scrollSpy:enter', function() {
    $('#navbarlogo').fadeIn(500);
});

$('#nav').on('scrollSpy:exit', function() {
    $('#navbarlogo').fadeOut(500);
});

500表示500毫秒,半秒钟。