Question

我有一个例子HERE

我不确定如何让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);
  });
});

使div向下滑动而不将内容向下推

2 个答案: