Question

我希望当用户向下滚动到绝对底部时，div应该从右侧出来，当用户点击关闭按钮然后它向右滑动。我有一个非常类似的示例代码，但我想要达到底部然后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();
});
});

我认为此行 if（$（window）.scrollTop（）＆gt; distanceTop）需要更改以确定用户是否达到网页的大部分底部。

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

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

感谢

Answer 1

var distanceTop = $('#last').offset().top - $(window).height();行有效地计算“当#last元素出现在屏幕底部时”，那就是当你的框动画时。

我认为您希望var distanceTop = $('#last').offset().top + $(window).height();应该是“当#last元素出现在屏幕顶部时”。

Answer 2

不完全确定.last有哪些部分可用，但如果您想在用户到达网页底部时显示容器，则可以使用以下内容：

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

将演示视为以下jsFiddle。

关于jquery slideout div

2 个答案: