make a div slide down without pushing content down

问题

i have an exampe HERE

im not sure how to make the div slide down but keeping the content at the top, as in not slide down when the div slides down.

could you possibly help me with this?

回答1:

Do you mean sort of like this?

http://jsfiddle.net/yGZHC/3/

If so, use position:absolute. This way the position of the element does not affect the position of other elements.

EDIT: Depending on what you're trying to do, relative may be better.

http://jsfiddle.net/yGZHC/5/

EDIT2: And even better than that, use the height dynamically to determine how far to move the content. This way you're not constrained to a fixed height.

http://jsfiddle.net/yGZHC/7/

$('#slidenav').animate({
    top: '-'+$(this).height()
}, 200);

$('#open a').toggle(
    function(){
        $('#slidenav').animate({
            top: '0'
        }, 500);
    },
    function(){
        $('#slidenav').animate({
            top: '-4'+$(this).height()
        }, 500);
});

回答2:

I fixed it to what I think you are asking for.

http://jsfiddle.net/yGZHC/2/

First thing's first, move the content below the stuff you want to be on top:

<div id="open">
  <a href="#">slide</a>
</div>
<div id="holder">
  <div id="header">
    <h1>TITLE HERE</h1>
  </div>
  <div id="contact">
  </div>
</div>
<div id="slidenav">
....

Then, just bump your slidenav up some more to compensate. You could even hide the div completely until the show button is clicked if you want.

$(document).ready(function() {
  $('#slidenav').animate({
    marginTop: '-480px'
  }, 200);
  $('#open a').toggle( function(){
    $('#slidenav').animate({
      marginTop: '0'
    }, 500);
  },
  function(){
    $('#slidenav').animate({
      marginTop: '-380px'
    }, 500);
  });
});

来源：https://stackoverflow.com/questions/6037317/make-a-div-slide-down-without-pushing-content-down

标签

jquery

css

slidedown