jQuery'scroll（）;'動畫不恢復

Question

我想動畫顯示和消失滾動上的類。

但是，不透明度只適用於第一次向上滾動和向下滾動它不會將不透明度恢復到0 ...任何人都可以幫助我嗎？

$(window).scroll(function() { 
    if ($(this).scrollTop() > 70) { 
     $('header').addClass('shortResize'); 
     $('.shortResize').animate({ 'opacity': '1' }); 
     $('section#contentWrap').addClass('contentWrap-margin'); 
    } else { 
     $('header').removeClass('shortResize'); 
     $('.shortResize').css('opacity', '0'); 
     $('section#contentWrap').removeClass('contentWrap-margin'); 
    } 
}); 

編輯（HTML件）：

<header> 
    <a id="logo" href="index.php"></a> 
</header> 

EDIT（CSS件）：

header { 
    background: -webkit-linear-gradient(bottom, rgba(61, 61, 61, .9) 50%, rgba(76, 76, 76, .9) 50%); 
    position: relative; 
    margin-top: 70px; 
    width: 100%; 
    height: auto; 
    padding: 10px 0px; 

    border-top-left-radius: 5px; 
    border-top-right-radius: 5px; 
    border: 1px solid rgba(0, 0, 0, .5); 
} 

a#logo { 
    background: url(../img/logo.png); 
    width: 629px; 
    height: 70px; 
    margin: auto; 
    display: block; 
} 

.shortResize { 
    position: fixed !important; 
    opacity: 0; 
    width: 100% !important; 
    height: auto; 
    padding: 10px 0px; 
    top: 0; 
    left: 0; 
    margin: 0 !important; 
    border-radius: 0px !important; 
    z-index: 33; 
} 

.contentWrap-margin { 
    margin-top: 160px; 
    border-radius: 5px; 
} 

Answer 1

你可以試試這個嗎？

UPDATE

$(window).scroll(function() { 
     if ($(this).scrollTop() > 70) { 
      $('header').addClass('shortResize'); 
      $('.shortResize').stop().animate({ 'opacity': '1' }); 
      $('section#contentWrap').addClass('contentWrap-margin'); 
     } else { 
      console.log($(this).scrollTop()); 
      $('header').removeAttributes(); 
      $('section#contentWrap').removeClass('contentWrap-margin'); 
     } 
    }); 



    jQuery.fn.removeAttributes = function() { 
     return this.each(function() { 
      var attributes = $.map(this.attributes, function (item) { 
       return item.name; 
      }); 
      var img = $(this); 
      $.each(attributes, function (i, item) { 
       img.removeAttr(item); 
      }); 
     }); 
    } 

Answer 2

你被排除在接下來的聲明試圖通過它來選擇shortResize類，然後，看固定版本：

$(window).scroll(function() { 
    if ($(this).scrollTop() > 70) { 
     $('header').addClass('shortResize'); 
     $('.shortResize').animate({ 'opacity': '1' }); 
     $('section#contentWrap').addClass('contentWrap-margin'); 
    } else { 
     $('.shortResize').css('opacity', '0'); //THIS NEEDS BE DONE FIRST 
     $('header').removeClass('shortResize'); 
     $('section#contentWrap').removeClass('contentWrap-margin'); 
    } 
});