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

Question

当我滚动页面时，我遇到动画问题。你可以在上面看到它。点击“显示通知”按钮，等待约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'})});
});

Answer 1

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

对原始 fiddle 的更改:

#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();
});