CODEWITHSUNDEEP
jquerycss
codeRed
codeRed

Reputation: 53

How to slide down div AND its contents after scrolling

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

Upvotes: 0

Views: 1712

Answers (1)

Chiller
Chiller

Reputation: 9738

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>

Upvotes: 1

Related Questions