当前位置：文江博客话题详情

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

发布于 2024-11-08 12:35:00 字数 132 浏览 2 评论 0原文

我有一个例子这里

我不知道如何使 div 向下滑动，但将内容保持在顶部，就像在不向下滑动时div 向下滑动。

你能帮我解决这个问题吗？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

往日情怀 2024-11-15 12:35:00

你的意思是类似这样吗？

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

如果是这样，请使用 position:absolute。这样元素的位置就不会影响其他元素的位置。

编辑：根据您想要执行的操作，relative 可能会更好。

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

编辑2：甚至更好的是，动态使用高度来确定如何远距离移动内容。这样你就不会被限制在固定的高度。

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

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

回复收藏 0 原文

葬花如无物 2024-11-15 12:35:00

我将其修复为我认为您所要求的。

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

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

回复收藏 0 原文

~没有更多了~