javascript - 如果div向下滑动则使div下面的所有内容都向下移动

Question

我试图让这个通知 div 在它处于事件状态时向下滑动。它使用这个脚本向下滑动:

<script type="text/javascript">
    $(document).ready(function(){
        $('#notice').slideDown(1000);
         $('.exit').click(function(){
             $("#notice").slideUp(400);
         });
    });
</script>

风格是:

#notice {
    background: #E0E0E0;
    color: #FFF;
    padding-left: 30px; 
    padding-top: 20px;
    padding-bottom: 20px;
    padding-right: 30px;
    position: absolute;
    z-index: 999999;
    width: calc(100% - 60px);
    top: 0;
    font-weight: 200;
    letter-spacing: 1px;
    text-align: center;
    display: none;
}

但是，即使下面的 div 处于“位置:固定”状态，我如何才能使它在向下滑动时将其他所有内容都向下移动。并在使用 .exit 链接删除时将其他所有内容滑回原位。

Answer 1

这里有一种选择

此处示例 http://jsfiddle.net/jvarj4gk/2/

$('#notice').slideDown(1000);
 var timer = setInterval(function () {
     $('#fixed').css({
         top: $('#notice').outerHeight()
     });
     if ($('#notice').outerHeight() == $('#fixed').css('top')) {
         clearInterval(timer);
     }

 }, 10);

 $('.exit').click(function () {
     $("#notice").slideUp(400, function(){
         $(this).remove();
     });
     $('#fixed').animate({
         top: 0
     }, 400);

 });

更新

要移动#body，你可以这样做

示例 http://jsfiddle.net/jvarj4gk/5/

$('#notice').slideDown(1000);
 var timer = setInterval(function () {
     $('#fixed, #body').css({
         top: $('#notice').outerHeight()
     });
     if ($('#notice').outerHeight() == $('#fixed').css('top')) {
         clearInterval(timer);
     }

 }, 10);

 $('.exit').click(function () {
     $("#notice").slideUp(400, function(){
         $(this).remove();
     });
     $('#fixed').animate({
         top: 0
     }, 400);

 });