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>

我希望黑色元素在蓝色元素进入时向下移动。我尝试使用 transform: translateY(...) 绑定到 jQuery (document).ready(function() 但黑色元素仍保留在原处而蓝色元素是动画的。

Answer 1

您可以通过 jQuery 获得 banner/header 的高度，将该值乘以 -1 作为负数 margin-top 应用到 .hinweis-wrapper 并将其动画化为 0通过 jQuery.

为了避免该元素首先显示片刻（在通过 jQuery 应用负边距之前），您可以在 css 中对其应用 display: none 并更改它在 jQuery 函数中，先于其他内容加载文档。

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

body {
  margin: 0;
}
.hinweis-wrapper {
  background: #00abe8;
  padding: 25px; 
  display: none;
}

.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>

Answer 2

这是一个 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>

CSS & jQuery: 元素移动元素

CSS & jQuery: Element moving Element

html

javascript

css

jquery

jquery-animate