關於jquery slideout div

我希望當用戶向下滾動到絕對底部時，div應該從右側出來，當用戶點擊關閉按鈕時，它會向右滑動。我得到了一個非常相似的示例代碼，但我希望達到底部時div應該出來。所以在這裏我給代碼，只是告訴我要改變什麼。關於jquery slideout div

<p id="last"> 
Some paragraph text 
</p> 

<div id="slidebox"> 
<a class="close"></a> 
<p>More in Technology & Science (4 of 23 articles)</p> 
<h2>The Social Impact of Scientific Research and new Technologies</h2> 
<a class="more">Read More »</a> 
</div> 

$(function() { 
$(window).scroll(function(){ 
    var distanceTop = $('#last').offset().top - $(window).height(); 

    if ($(window).scrollTop() > distanceTop) 
     $('#slidebox').animate({'right':'0px'},300); 
    else 
     $('#slidebox').stop(true).animate({'right':'-430px'},100); 
}); 

$('#slidebox .close').bind('click',function(){ 
    $(this).parent().remove(); 
}); 
});

我覺得這條線如果（$（窗口）.scrollTop（）> distanceTop）需要改變，以確定用戶到達底部頁面的大部分。

完整的源代碼和演示網址是 http://tympanus.net/codrops/2010/04/13/end-of-page-slide-out-box/

http://tympanus.net/Tutorials/EndPageSlideOutBox/

感謝

來源

2012-02-02 Thomas

當您從javascript的第3行刪除.offset（）會發生什麼？ – hollsk 2012-02-02 12:28:47

不知道如何發揮什麼樣的一部分.last了，但如果你想在用戶到達網頁底部，顯示容器，你可以使用這樣的事情：

if($(window).scrollTop() == ($('body').height() - $(window).height())) 
    $('#slidebox').animate({'right':'0px'},300); 
else 
    $('#slidebox').stop(true).animate({'right':'-430px'},100);

看到一個演示如下jsFiddle。

來源

2012-02-02 12:42:57

我在這裏獲得的成功是我的完整代碼http://jsfiddle.net/tridip/wjvbK/謝謝 – Thomas 2012-02-02 14:04:34

不錯，看起來不錯。 – 2012-02-02 14:19:00

var distanceTop = $('#last').offset().top - $(window).height();有效地計算「的時候，#last元素出現在屏幕底部的」行了，這時候你的盒子是動畫。

我想你想要var distanceTop = $('#last').offset().top + $(window).height();這應該是「當#last元素出現在屏幕的頂部」。

來源

2012-02-02 12:35:00 pete

我不想用$（'＃last'）。offset（）。top來計算剛纔用戶已經到達頁面底部或者沒有...如果到達頁面底部，那麼我會做一些事情。謝謝指導我。 – Thomas 2012-02-02 12:40:38

關於jquery slideout div

回答

相關問題