Question

我有一个div，我希望滑下来淡入并向下滑动（与twitter bootstrap模式相同）。

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

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

那么，我怎么能用动态高度div来做呢？

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

Answer 1

我的想法是把你想要的实际元素放到滑动状态，让我们称之为twitterbar，我对twitter一无所知，但听起来很酷，是一个包装div。

所以，你把twitterbar和必要的css：position: absolute;margin-top:-100%;放在一个包装div中，并带有必要的css：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。我希望我能正确理解这个问题。

Answer 2

我只是在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％，因此我可以看到它实际上只是窥视窗口的顶部。

Answer 3

您可以使用转换来做到这一点：

class MainActivity : AppCompatActivity() , SensorEventListener {

    private lateinit var  sensorManager : SensorManager

    private lateinit var  proximity_sensor : Sensor

    lateinit var txt : TextView

    override fun onCreate(savedInstanceState : Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        sensorManager = getSystemService(Context.SENSOR_SERVICE) as SensorManager

        proximity_sensor = sensorManager.getDefaultSensor(Sensor.TYPE_PROXIMITY)

        txt = findViewById(R.id.text1)
    }

    override fun onResume() {
        super.onResume()

        sensorManager.registerListener( this , proximity_sensor , SensorManager.SENSOR_DELAY_NORMAL)
    }

    override fun onSensorChanged(event : SensorEvent) {

        txt.text = event.values[0].toString()
    }

    override fun onAccuracyChanged(sensor : Sensor?, accuracy : Int) { }

    override fun onPause() {
        super.onPause()

        sensorManager.unregisterListener( this )
    }
}

在此处添加和删除类 <!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> 以查看其工作情况： https://jsfiddle.net/tprfdL21/

将动态高度div放在可见屏幕部分的顶部？

3 个答案: