CSS和jQuery：元素移动元素

Question

我希望横幅广告在加载后从顶部向下移动到网站中。从顶部移入的元素应将页面的其余部分向下推，以引起更多关注。这是我的代码的简化版本：

.hinweis-wrapper {
  background: #00abe8;
	padding: 25px;
}

.hinweis {
	color: #fff;
  margin: 0 auto;
}

p {margin: 0}

.rest-of-website {
  height: 160px;
  background-color: black
}

<div class="hinweis-wrapper">
  <div class="hinweis">
    <p>Content goes here</p>
  </div>
</div>

<div class="rest-of-website">
</div>

[当蓝色元素进入时，我希望黑色元素向下移动。我尝试使用绑定到jQuery transform: translateY(...)的(document).ready(function()，但黑色元素保留了蓝色元素的动画显示位置。

Answer 1

这里是一个Jquery版本，它在页面加载后将黑色元素下移。要对其进行动画处理，可以使用.slideDown(duration, functionOnEnd())

document.addEventListener("DOMContentLoaded", ready);
function ready() {
  $('.rest-of-website').css('margin-top', $('.hinweis-wrapper').prop("margin-top"));
}

.hinweis-wrapper {
  background: #00abe8;
	padding: 25px;
}

.hinweis {
	color: #fff;
  margin: 0 auto;
}

p {margin: 0}

.rest-of-website {
  height: 160px;
  background-color: black
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="hinweis-wrapper">
  <div class="hinweis">
    <p>Content goes here</p>
  </div>
</div>

<div class="rest-of-website">
</div>

Answer 2

[您可以通过jQuery获得横幅/标题的高度，将值-1作为负margin-top应用于.hinweis-wrapper，并通过jQuery将其动画为0：

$(document).ready(function() {
  var headerheight = $(".hinweis-wrapper").outerHeight();
  var offset = headerheight * -1;
  $(".hinweis-wrapper").css('marginTop', offset);
  $(".hinweis-wrapper").animate({
    marginTop: '0px'
  }, 1000);
})

.hinweis-wrapper {
  background: #00abe8;
  padding: 25px; 
}

.hinweis {
  color: #fff;
  margin: 0 auto;
}

p {
  margin: 0
}

.rest-of-website {
  height: 160px;
  background-color: black;
  color: white;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="hinweis-wrapper">
  <div class="hinweis">
    <p>This is the header, which has dynamic height</p>
  </div>
</div>

<div class="rest-of-website">
  <p>This is the Website Content</p>
  <p>(dynamic content)</p>
</div>