如果div向下滑动，使div下面的所有内容向下移动答案

【问题标题】：Make div all content below move down if div slides down如果div向下滑动，使div下面的所有内容向下移动
【发布时间】：2014-10-15 21:53:23
【问题描述】：

我正在尝试让这个通知 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 链接删除其他所有内容时将其滑回。

【问题讨论】：

也将下面的所有内容移动。如果您制作小提琴，我们可以为您提供更多帮助:)
没有@BojanPetkovski。我只希望在显示 div 时发生这种情况。如果我不希望它处于活动状态，我只需删除整个脚本，它将被隐藏。

标签： javascript jquery html css

【解决方案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);

 });

【讨论】：

谢谢！但是，如果我在#notice 下面的所有 div 周围包裹一个 div 并在其中包含固定的 div 会怎样。那我该怎么办？因为现在它看起来像这样直播：www.eldeskin.com 密码：hallo 看起来固定在下面的 div 几秒钟后被移动了....
为什么有一个margin-top：100px；在#front？这导致了空白。
因为#header是一个固定的div，我需要把下面的div向下移动。我删除了它并用填充替换它，但我仍然有同样的问题。我现在不使用#fixed，而是使用#body，它包裹在#notice 下方的所有div 周围。我如何设置样式，即使里面有固定的 div，它也会向下移动？它现在的样式为position: absolute;
谢谢！ #body 有效，但 #fixed 几秒钟后仍在缓慢下降
好吧，当您应用了过渡效果时，您会期待什么：D 移除过渡效果 .withfadeout，它会根据需要工作。并将 padding-top: 40px 添加到 #front 而不是 100px :)

【解决方案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

【讨论】：

谢谢，但无法正常工作。如何将它放入我现有的脚本中？
@VemundEldegard 更新了我的帖子，看看小提琴。