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

Question

(read carefully twitchy trigger finger downvoters)

I am trying to get a div AND its contents to slide down after scrolling to a certain point. I have looked extensively, but I have only been able to locate how to slide down the div, however its contents are static. In other words, the div slides down to reveal its contents, but its contents do NOT slide.

Here is the JsFiddle is used...

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();

As you can see, the content of the div does not move. Only the div itself. I need the content to MOVE down WITH the div, NOT to only be revealed by a moving div.

Answer 1

You can use class and transition to change the position of the div to make it look like its coming down

See working example:

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