用固定位置與Jquery滑動div

我有一個固定位置的滾動到頂部按鈕。我想讓這個按鈕在你滾動400px後從屏幕底部滑入。我可以用它淡入淡出。這是按鈕的代碼。用固定位置與Jquery滑動div

<a href="#top" id="scrolltop"><img src="images/upbutton.png" alt="scroll to top"/></a> 

#scrolltop { 
position:fixed; 
height:38px; 
width:38px; 
background-color:#444; 
right:15px; 
bottom:15px; 
z-index:100; 
} 



$(document).scroll(function() { 
     var y = $(this).scrollTop(); 
     if (y > 1000) { 
      $('#scrolltop').animate({bottom: 100}); 
     } else { 
      $('#scrolltop').animate({bottom: -100}); 
     } 
});

來源

2014-01-16 andre de waard

有什麼問題緩存變量？請顯示您的HTML。 – isherwood

一個問題是，您是針對1000此外，雖然滾動scroll事件被觸發多次測試的400

代替。而且因爲jQuery的animate功能是可堆疊你最終在每個方向上的多個動畫和長時間的延遲，同時等待每個結束..

所以你需要一個更嚴密的邏輯..

沒有動畫如果元素已經動畫，使用:animated jquery selector與.is() method
組合也檢查元素已經在正確的位置想要進行動畫走向，添加前/刪除class作爲標誌，以做到這一點
也這是一個好主意到多次使用

，使該腳本變得

var scr = $('#scrolltop'); 
$(document).scroll(function() { 
    var y = $(this).scrollTop(); 
    if (y > 400) { 
     if (scr.is('.off') && !scr.is(':animated')) { 
      scr.animate({bottom: 100}, function() { 
       scr.removeClass('off'); 
      }); 
     } 
    } else { 
     if ((!scr.is('.off')) && (!scr.is(':animated'))) { 
      scr.animate({bottom: -100}, function() { 
       scr.addClass('off'); 
      }); 
     } 
    } 
});

演示在http://jsfiddle.net/gaby/7eYdB/

來源

2014-01-16 20:01:36

哇，這很快！非常感謝你。它工作完美！ –

用固定位置與Jquery滑動div

回答

相關問題