Jquery 当用户向下滚动时，如何从页面的右下角增加Div通知栏

我为它编码，但有一个错误，我无法捕获。这是我的全部代码。这是我的js小提琴链接

当用户向下滚动和向上滚动时，我试图从页面的右下角增加一个div，然后会出现相反的效果。不明白是哪里出的错

我的html 我的css 修正了工作正常的代码 HTML CSS代码

---

将你的幻灯片框css设置为right:0px，然后你只需要设置高度、宽度和不透明度的动画，而不是试图找出左边的@Pete，我这样做了，但没有解决问题。请看我的小提琴链接。请看这行：如果$window.scrollTop==$'body'。height-$window.height，则它永远不会相等。为什么？试试这个：如果$window.scrollTop+$window.height==$document.height--刚刚删除了缓和效果，因为它没有包含在fiddle@Pete中谢谢你的帮助。我想知道，当我添加缓和效果时，它就会停止工作。很长一段时间以前，我在小提琴中使用了缓和效果，这很有效，但现在不起作用。

Hello<br/>
Hello<br/>
Hello<br/>
Hello<br/>
Hello<br/>
Hello<br/>
Hello<br/>
Hello<br/>
Hello<br/>
Hello<br/>
Hello<br/>

<div id="slidebox">

    <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>

$(document).ready(function(){
    $(window).scroll(function(){
        if($(window).scrollTop() == ($('body').height() - $(window).height()))
        {
            // show container
            $('#slidebox').stop(true).animate({
                'height':'100px',
                'width':'400px',
                left:($(window).width()-400)+'px',
                'opacity':'1'}, { queue: false, duration: 500, easing: 'easeInCubic' });          
        }
        else
        {
            $('#slidebox').stop(true).animate({
                'height':'0px',
                'width':'0px',
                left:($(window).width()-400)+'px',
                'opacity':'0'},{queue: false, duration: 500});          
        }
    });

$('#slidebox').bind('click',function()
{

$('#slidebox').stop(true).animate({'right':'-430px','opacity':'0'},{queue: false, duration: 500}); 

});

});    

#slidebox{
    width:0px;
    height:0px;
    padding:10px;
    background-color:#fff;
    border-top:3px solid #E28409;
    position:fixed;
    bottom:0px;

    -moz-box-shadow:-2px 0px 5px #aaa;
    -webkit-box-shadow:-2px 0px 5px #aaa;
    box-shadow:-2px 0px 5px #aaa;
    opacity:0;
}
#slidebox p, a.more{
    font-size:11px;
    text-transform:uppercase;
    font-family: Arial,Helvetica,sans-serif;
    letter-spacing:1px;
    color:#555;
}
a.more{
    cursor:pointer;
    color:#E28409;
}
a.more:hover{
    text-decoration:underline;
}
#slidebox h2{
    color:#E28409;
    font-size:18px;
    margin:10px 20px 10px 0px;
}

Hello<br/>
Hello<br/>
Hello<br/>
Hello<br/>
Hello<br/>
Hello<br/>
Hello<br/>
Hello<br/>
Hello<br/>
Hello<br/>
Hello<br/>
Hello<br/>
Hello<br/>
Hello<br/>
Hello<br/>
Hello<br/>
Hello<br/>
Hello<br/>
Hello<br/>
Hello<br/>
Hello<br/>
Hello<br/>
Hello<br/>
Hello<br/>
Hello<br/>
Hello<br/>
Hello<br/>
Hello<br/>
Hello<br/>
Hello<br/>
Hello<br/>
Hello<br/>
Hello<br/>
Hello<br/>
Hello<br/>
Hello<br/>
Hello<br/>
Hello<br/>
Hello<br/>
Hello<br/>
Hello<br/>
Hello<br/>
Hello<br/>
Hello<br/>
Hello<br/>
Hello<br/>
Hello<br/>
Hello<br/>
Hello<br/>
Hello<br/>
Hello<br/>
Hello<br/>
Hello<br/>

<div id="slidebox">

    <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>

$(window).scroll(function(){
    if($(window).scrollTop() + $(window).height() == $(document).height())
    {
        // show container
        $('#slidebox').stop(true).animate({
            'height':'100px',
            'width':'400px',
            'opacity':'1'}, { queue: false, duration: 500 });          
    }
    else
    {
        $('#slidebox').stop(true).animate({
            'height':'0px',
            'width':'0px',
            'opacity':'0'},{queue: false, duration: 500});          
    }
});

$('#slidebox').on('click', function() {
    $('#slidebox').stop(true).animate({
            'height':'0px',
            'width':'0px',
            'opacity':'0'},{queue: false, duration: 500});   
});

#slidebox{
    width:0px;
    height:0px;
    padding:10px;
    background-color:#fff;
    border-top:3px solid #E28409;
    position:fixed;
    bottom:10px;
    right:10px;

    -moz-box-shadow:-2px 0px 5px #aaa;
    -webkit-box-shadow:-2px 0px 5px #aaa;
    box-shadow:-2px 0px 5px #aaa;
    opacity:0;
}
#slidebox p, a.more{
    font-size:11px;
    text-transform:uppercase;
    font-family: Arial,Helvetica,sans-serif;
    letter-spacing:1px;
    color:#555;
}
a.more{
    cursor:pointer;
    color:#E28409;
}
a.more:hover{
    text-decoration:underline;
}
#slidebox h2{
    color:#E28409;
    font-size:18px;
    margin:10px 20px 10px 0px;
}