javascript - 滚动网站时动画无法正常工作

滚动页面时，动画出现问题。您可以在上方看到它。
单击“显示通知”按钮并等待大约2秒钟，然后该通知将开始隐藏。上下滚动，您将看到通知在上下跳跃。我该怎么做才能始终在网站窗口的底部发出通知，即使在滚动过程中也是如此？

JSFIDDLE

的HTML

<input type="button" value="show notice">
<div id="notice"><p>Notice</p></div>

的CSS

body {
  height:3000px;
}

#notice {
  display:none;
  position:absolute;
  top:0;
  left:0;
  width:100px;
  height:40px;
  background:green;
  text-align:center;
  font:12px Verdana; color:white;
}

#notice p {
}

JS

function shownotice(){
    if(typeof(ntimeout)!='undefined')
        clearTimeout(ntimeout);
    $('#notice').css({'height':'0px', 'top':h+$(window).scrollTop()+'px'}).show().animate({'height':'+=40px', 'top':'-=40px'}, {duration:300});
    ntimeout=setTimeout(function(){hidenotice();}, 2000);
}

function hidenotice(){
    $('#notice').animate({'height':'-=40px', 'top':'+=40px'}, {duration:10600, complete:function(){$(this).hide();}});
}

$(function(){
    h=window.innerHeight||document.body.clientHeight;
    $('#notice').css({'top':h-$('#notice').height()+'px'});
    $('input').on('click', function(){shownotice();});
    $(window).scroll(function(){$('#notice').css({'top':h-$('#notice').height()+$(window).scrollTop()+'px'})});
});

最佳答案

http://jsfiddle.net/sn1xfwxm/11/

更改为您的原始小提琴：

#notice {
    position:fixed;

删除显示：无，也！

生成的js要简单得多：

$("#notice").hide(); //hide the notice on document load

$("#show").click(function () {
    $("#notice").stop(true, true).slideDown();
});
$("#hide").click(function () {
    $("#notice").stop(true, true).slideUp();
});