jquery - 滚动后如何向下滑动div及其内容

Question

(仔细阅读抽搐的扳机手指downvoters)

我试图让一个 div 及其内容在滚动到某个点后向下滑动。我已经广泛查看，但我只能找到如何向下滑动 div，但它的内容是静态的。换句话说，div 向下滑动以显示其内容，但其内容不会滑动。

这里使用的是JsFiddle...

http://jsfiddle.net/BinaryMuse/Ehney/1/

CSS...

body {
    height: 10000px;
}

.fixedDiv {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
}

header {
    height: 300px;
    border: 1px solid black;
}

JavaScript

// Get the headers position from the top of the page, plus its own height
var startY = 500;

$(window).scroll(function(){
    checkY();
});

function checkY(){
    if( $(window).scrollTop() > startY ){
        $('.fixedDiv').slideDown();
    }else{
        $('.fixedDiv').slideUp();
    }
}

// Do this on load just in case the user starts half way down the page
checkY();

如您所见，div 的内容没有移动。只有 div 本身。我需要内容随 div 一起向下移动，而不是仅由移动的 div 显示。

Answer 1

你可以使用class和transition来改变div的位置，让它看起来像是在下降

查看工作示例:

// Get the headers position from the top of the page, plus its own height
var startY = 500;

$(window).scroll(function() {
  checkY();
});

function checkY() {
  if ($(window).scrollTop() > startY) {
    $('.fixedDiv').addClass("slide");
  } else {
    $('.fixedDiv').removeClass("slide");
  }
}

// Do this on load just in case the user starts half way down the page
checkY();

body {
  height: 10000px;
}

.fixedDiv {
  visibility: hidden;
  position: fixed;
  top: -10px;
  left: -0;
  transition: all .5s;
}

.slide {
  visibility: visible;
  top: 0;
}

header {
  height: 300px;
  border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class='fixedDiv'>Here is a fixed div.</div>
<header>Here is the header! It is kinda tall to demonstrate...</header>