Javascript 如何在顶部浮动一个div，并将其他div向下推？_Javascript_Css

Javascript 如何在顶部浮动一个div，并将其他div向下推？

javascript css

Javascript 如何在顶部浮动一个div，并将其他div向下推？,javascript,css,Javascript,Css,我觉得这是一个非常愚蠢的问题，但我所读到的一切都没有让我明白如何使用它。我希望有一个包含两个divs的非常基本的页面。一个在顶部，显示总体信息，另一个在底部，显示所有数据。当数据比页面长并且用户滚动时，我希望顶部div向下浮动。我通过使用position:fixed和top:0实现了这一点，但是第一个div不会向下推第二个当然，我可以将margintop添加到数据div，但我也希望能够打开/关闭topdiv。当我这样做（将其关闭）时，页边距顶部保持不变，因此这显然有点像黑客如何保持浮动div

我觉得这是一个非常愚蠢的问题，但我所读到的一切都没有让我明白如何使用它。我希望有一个包含两个

div

s的非常基本的页面。一个在顶部，显示总体信息，另一个在底部，显示所有数据。当数据比页面长并且用户滚动时，我希望顶部div向下浮动。我通过使用

position:fixed

和

top:0

实现了这一点，但是第一个

div

不会向下推第二个

当然，我可以将

margintop

添加到数据

div

，但我也希望能够打开/关闭top

div

。当我这样做（将其关闭）时，

页边距顶部保持不变，因此这显然有点像黑客
如何保持浮动div
在顶部，并将其他所有内容向下推
下面是一个例子，展示了我正在努力解决的基本问题：

HTML:
像这样的

#topFloat{
边框：1px黑色实心；
位置：粘性；
排名：0；
}
#资料{
边框：1px红色实心；
}

横幅式材料
试验
试验
试验
试验
试验
试验
试验
试验
试验
试验
试验
试验
试验
试验
试验
试验
试验
试验
试验
试验
试验
试验
试验
试验
试验
/>试验
试验
试验
试验
试验
试验
试验
试验
试验
试验
试验
试验
试验
试验
试验
试验
试验
试验
试验
试验
试验
试验
试验
试验
试验
/>试验
试验
试验
试验
试验
试验
试验
试验
试验
试验
试验
试验
试验
试验
试验
试验
试验
试验
试验
试验
试验

您的要求相互矛盾。1） 我想让最顶级的跳水运动员下浮，让其他跳水运动员下浮——我能理解。我想要的是，由于横幅的存在，数据会从屏幕顶部偏移。如本页，以及stackoverflow搜索框如何保持在顶部。但我不想简单地使用上边距，因为我还将有一个切换来隐藏横幅。我希望“banner-TYPE-STUFF”div在用户滚动时保持在顶部。在浏览器页面的顶部，哪个位置：fixed。我知道这会很简单。我以前没用过sticky。但是，看起来您的代码片段不起作用，因为没有粘贴（我想）。如果你能解决这个问题，我可以接受你的回答。谢谢它正在工作。如果您不能像我一样运行代码段，请复制代码并将其粘贴到您自己的代码中，您将看到这是可行的。我很高兴能帮助你。
<html>
  <body>
    <div id="topFloat">
      BANNER TYPE STUFF
    </div>
    <div id="data">
      test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />
    </div>
  </body>
</html>

#topFloat {
  border:1px black solid;
  position:fixed;
  top: 0;
}
#data {
  border: 1px red solid;
}