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处于状态＆＃39; position：fixed＆＃39;，我怎么能在向下滑动时将其他所有内容移动下来。当使用.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);

 });

Answer 2

您可以animate()以下div

var h = '+=' + $('#notice').height();
$('#fixedDivId').animate({
    top: h;
},1000);

几乎相同的内容可以向上滑动h='-='+ $('#notice').height();

<强> UPD 对于您的代码，它将如下所示

 $(document).ready(function(){
    var h = $('#notice').height()+'px';
    $('#notice').slideDown({duration:1000, queue:false});
    $('#fixedDivId').animate({
       top: h
    },{duration:1000, queue:false});
    $('.exit').click(function(){
       $("#notice").slideUp(400);
    });
 });

Fiddle

如果div向下滑动，请将div下面的所有内容向下移动

2 个答案: