3

我有一个 div，我希望向下滑动并淡入和向下滑动（与 twitter 引导模式非常相似）。

为此，我希望使用固定在可见视口上方的位置来定位 div。

问题是，我不知道 div 的大小（垂直），所以我不能只使用top: -(height of div)px.

那么，如何使用动态高度 div 做到这一点？

      /-------------\
      |             |
      | Dynamic Div |
      |             |
\-----\-------------/-------/
|                           |
|         VIEWPORT          |
|                           |
/---------------------------\
4

3 回答 3

0

这个想法是将你想要滑动的实际元素，我们称之为 twitterbar，我对 twitter 一无所知，但它听起来很酷，放入一个包装器 div。

因此，您将带有基本 css: 的 twitterbar 放在带有基本 css:position: absolute;margin-top:-100%;的包装器 div 中position: fixed;。现在您需要将 twitterbar 的 margin-top 属性从 -100% 逐渐变为 0%。

您可以使用 CSS3 制作动画，这很酷，但在 2013 年初并非所有用户都支持。或者您可以使用 Javascript 制作动画，如果您觉得懒惰：jQuery。这是另一个问题，我不会为你解决。

以 HTML 为例（其中有一些无用的样式，但我希望它能证明它有效），您可以手动更改 margin-top 的百分比以显示它有效。

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            #dynamic
            {
                position: absolute;
                margin-top: -50%;
                border: 4px dashed red;
                width: 100px;
                height: auto;
            }
            #wrapper
            {
                position: fixed;
                border: 4px dashed blue;
                width: 100px;
                height: auto;
            }
        </style>
    </head>
    <body>
        <div id="wrapper">
            <div id="dynamic">Dynamic<br />height<br />content</div>
        </div>
    </body>
</html>

PS。我希望我正确理解了这个问题。

于 2013-01-14T00:55:19.617 回答
0

我只在 Chrome 中尝试过，但它似乎可以按您的意愿工作：

<!doctype html>
<html>
<head>
<style>
  .hidden {
    background: red;
    width: 200px;
    position: fixed;
    bottom: 99%;
  }
</style>
</head>
<body>
  <div class="main">
    <div class="hidden">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam lacus ligula, accumsan id imperdiet rhoncus, dapibus vitae arcu. Nulla non quam erat, luctus consequat nisi. Integer hendrerit lacus sagittis erat fermentum tincidunt. Cras vel dui neque. In sagittis commodo luctus. Mauris non metus dolor, ut suscipit dui. Aliquam mauris lacus, laoreet et consequat quis, bibendum id ipsum. Donec gravida, diam id imperdiet cursus, nunc nisl bibendum sapien, eget tempor neque elit in tortor.
    </div>
  </div>
</body>
</html>

基本上，据我了解，bottom设置绝对定位元素的底部与其包含块之间的距离。在这种情况下，您希望它是 100%。在上面的示例中，我将其设置为 99%，因此我可以看到它实际上只是在窥视窗口的顶部。

于 2013-01-14T01:08:39.220 回答
0

您可以使用转换来执行此操作：

  <!doctype html>
    <html>
    <head>
    <style>
      .hidden {
        position: absolute;
        top:0;
        width:100%;
        left:0;
        right: 0;
        transform: translateY(-100%);
      }
      .hidden.show {
        transform: translateY(0%);
      }
    </style>
    </head>
    <body>
      <div class="main">
        <div class="hidden">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam lacus ligula, accumsan id imperdiet rhoncus, dapibus vitae arcu. Nulla non quam erat, luctus consequat nisi. Integer hendrerit lacus sagittis erat fermentum tincidunt. Cras vel dui neque. In sagittis commodo luctus. Mauris non metus dolor, ut suscipit dui. Aliquam mauris lacus, laoreet et consequat quis, bibendum id ipsum. Donec gravida, diam id imperdiet cursus, nunc nisl bibendum sapien, eget tempor neque elit in tortor.
        </div>
      </div>
    </body>
    </html>

在此处添加和删除类.show以查看它的工作： https ://jsfiddle.net/tprfdL21/

于 2021-07-30T17:04:25.210 回答