使div向下滑動而不將內容向下推

Question

我在這里有一個例子

我不知道如何讓div向下滑動，但保持內容在頂部，因為當div滑下時不會向下滑動。

你能幫我解決這個問題嗎？

Answer 1

你的意思是這樣嗎？

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

如果是這樣，請使用position:absolute 。 這樣，元素的位置不會影響其他元素的位置。

編輯：根據你想要做的事情， relative可能會更好。

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

EDIT2：甚至比這更好，動態使用高度來確定移動內容的距離。 這樣你就不會被限制在一個固定的高度。

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

Answer 2

我把它固定在我認為你要求的東西上。

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

首先，將內容移動到您想要的頂部內容之下：

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

然后，只需將你的slidenav向上撞一下slidenav進行補償。 如果需要，您甚至可以完全隱藏div，直到單擊“顯示”按鈕。

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