Jquery ScrollTop操縱

Question

我的else函數有什麼問題？

我嘗試隱藏註冊框scrollTop = 0時，但無法使不透明度工作。在不透明度不變的情況下寬度改變被執行（警告彈出，所以滾動頂部位置爲0）。

很想聽聽來自Jquery大師的一些見解。謝謝！！

$(window).scroll(function(){ 
    if($(window).scrollTop() !== 0) { 
      $('.sign-up-box').animate({ 
       right: '100px', 
       opacity: 1 
      }); 
    } else {       
     $('.sign-up-box').css('opacity', '0.6'); 
     $('.sign-up-box').css('width', '300px'); 
     alert("scrolltop = 0"); 
    } 
}); 

下面是引用的HTML：

<div class="list-group sign-up-box"> 
    <a href="#" class="list-group-item active"> 
    <span class="glyphicon glyphicon-check"></span> 
    <h4 class="list-group-item-heading pull-right">Sign up to our email list</h4> 
    </a> 
</div> 

下面是引用的CSS：

.sign-up-box { 
    position: fixed; 
    right: -250px; 
    bottom: 100px; 
    width: 250px; 
    z-index: 4; 
    opacity: 0; 
    box-shadow: 0 6px 12px rgba(0,0,0,.175); 
} 

Answer 1

我做更多的研究，關於這個問題，並計算過，爲什麼我的CSS不工作的原因是因爲.animate被稱爲不斷爲我們滾動頁面（因此.animate不斷更新並運行），結果動畫覆蓋了css更改（與Jimmy所說的相同）。我也嘗試過使用.stop（）。animate，並且只有當我等待足夠長的時間才能完成舊動畫時纔有效。否則，如果我快速向下滾動並返回頂部，則覆蓋會發生，並且我看不到動畫的更改。

關於David的解決方案，有1個潛在的缺點，即動態被稱爲不止一次。我做了一些修改並提出了以下優化的解決方案：

 $(document).ready(function() { 

      // Keep track of previous scroll position. 
      var previousPosition = 0; 
      $(window).scroll(function() { 

       // If user is scrolling down. 
       if($(window).scrollTop() > 40) { 

        // And user is coming from the top. 
        if(previousPosition <= 40) { 

         //Then animate. 
         $('.sign-up-box').animate({ 
          right: '100px', 
          opacity: 1 
         }, 400); 

        } 
       } else { 

        // If user is scrolling from the bottom. 
        if(previousPosition > 40) { 

         // Then animate. 
         $('.sign-up-box').stop().animate({ 
          right: '-200px', 
          opacity: 0 
         }, 400); 
        } 
       } 

       // Update previous position. 
       previousPosition = $(window).scrollTop(); 
      }); 
     }); 

關於JQuery的.animate多麼有趣的探索。感謝大家的幫助！

Answer 2

檢查動畫目前正在與.is(':animated')運行，並有你的jQuery像這樣：

jQuery(function($) { 

    $(window).scroll(function(){ 

     if($(window).scrollTop() > 0) { 
      if(!$('#sign-up-box').is(':animated')) { 
       $('#sign-up-box').animate({ 
        right: '100px', 
        opacity: 1 
       }, 1500);  
      } 
     } else {      
      $('#sign-up-box').animate({ 
       right: '-250px', 
       opacity: 0 
      }, 1500);  

     } 

    }); 

}); 

Working JSFiddle

其它附加的相關信息

你可以傳遞一個對象，如果你有幾個屬性來設置，像這樣.css() jQuery的方法：

$(this).css({ 
    opacity: 0, 
    color: '#FF0000' 
}); 

對於一個屬性，你可以使用較短的版本：$(this).css('opacity', '0');。

Answer 3

這裏的問題是一個競爭條件。假設用戶沒有滾動到頂部，並且我們生成了動畫。如果用戶在動畫運行時滾動到頂部，那麼.css調用將立即修改style屬性，但仍在運行的動畫會立即覆蓋「opacity」屬性。使用.animate替換.css的原因是動畫排隊（在其他動畫完成之前它們不會運行）。要做到這一點，正確的方法是做到這一點：

$('#sign-up-box').stop().css('opacity', '0.6');