jquery - 如何为滚动窗口时出现的元素添加滑动效果过渡(通过在运行时添加 'position:fixed')？

Question

在这个SSCCE中，具有position:fixed;的类scroll-header在运行时被应用到div.header。我希望它在出现时具有从屏幕顶部边缘向下滑动的效果。我该怎么做？

我已经尝试在 .header 上应用 transition:position 1s ease 0s; 但它似乎不起作用。

$(document).ready(function() {
  console.log("script.js is detected"); //check

  $(window).scroll(function() {
    console.log("window onscroll being called."); //check
    if ($("div.view").visible(true)) {
      console.log("YES if ( $(\"div.view\").visible(true) )"); //check
      $(".header").removeClass("scroll-header");
    } else {
      console.log("NO if ( $(\"div.view\").visible(true) )"); //check
      $(".header").addClass("scroll-header");
    }
  });

});

.view {
  height: 500px;
  width: 100%;
  background-color: crimson;
}
.second {
  height: 2500px;
  width: 100%;
  background-color: purple;
}
.header {
  position: absolute;
  width: 100%;
  height: 100px;
  background-color: cyan;
  top: 0px;
  left: 0px;
  transition:position 1s ease 0s;
}
.scroll-header {
  background-color: yellow;
  position: fixed;
  width: 100%;
  height: 70px;
  background-color: yellow;
}
* {
  border: 0px;
  padding: 0px;
  margin: 0px;
  box-sizing: border-box;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.jsdelivr.net/jquery.visible/1.1.0/jquery.visible.min.js"></script>
<div class="view">.</div>
<div class="header">.</div>
<div class="second">.</div>

Answer 1

一种方式是给予 top: 0px 属性到 .scroll-header 类并从 transition 属性中删除位置。

.scroll-header{
       top: 0px;
}

.header{
       transition: 1s;
}

检查这个 fiddle :JSFiddle

要设置所需的动画，您需要将页眉高度设置为 0px，然后需要将其设置为所需的页眉高度大小(在您的情况下为 70px)。

请检查这个 fiddle :Updated JSFiddle