jquery - 使 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增加一些来补偿。如果需要，您甚至可以完全隐藏 div，直到单击显示按钮。

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