视口滚动淡出和淡入淡出

时间:2016-01-14 17:21:45

标签: javascript jquery

我正在使用插件jquery .viewport,当我在元素#section中向下滚动它很好但是当我向上滚动到标题时它被隐藏了 我很抱歉我的英语不太好

HTML

<div class="header"></div>
<div class="tab"></div>
<div class="section"></div>

风格

    .header{
    width:300px;
    height:300px;
    background:red;
}
.tab{
  margin-top:250px;

}
.section{
    width:300px;
    height:300px;
    background:blue;
}

JS

$(document).ready(function() {
    $('.post-logo').addClass('animated fadeInUp');
    $('.title').addClass('animated fadeInUp');

       ;(function($, win) {
  $.fn.inViewport = function(cb) {
     return this.each(function(i,el){
       function visPx(){
         var H = $(this).height(),
             r = el.getBoundingClientRect(), t=r.top, b=r.bottom;
         return cb.call(el, Math.max(0, t>0? H-t : (b<H?b:H)));  
       } visPx();
       $(win).on("resize scroll", visPx);
     });
  };
}(jQuery, window));

$(window).scroll(function(){

$("#header").inViewport(function(px){
    if(px) $(this).addClass("animated fadeOut")
    else $(this).removeClass("animated fadeOut").addClass("animated fadeIn")
});

  });

});

0 个答案:

没有答案