如何在视口上维护div固定

Question

我在屏幕上有一个固定的div（#mydiv)，并且在0p x处从视口1000px height固定，我的屏幕尺寸为1280 x 800像素，文档高度为1600像素; < / p>

所以我从div高度失去了额外的200px，我如何计算在滚动时显示的顶部位置？再次向上滚动时返回top:0？

Answer 1

如果您想要的是您的div位于页面顶部的位置：0但是当您向下滚动时仍然可以滚动，那么您正在查看的是将div设置为：

position:absolute;
top:0;

要注意，以绝对方式定位的div将分别占据其没有静态位置的关闭祖先（如果你没有为它指定任何位置属性，则默认为默认值）。

如果由于某种原因你不能或不想让你的div处于绝对位置，你可以计算页面的偏移量并相应地改变div的位置，假设你正在使用jQuery：

$( window ).scroll(function() {
  $( "#mydiv" ).css({
    top: -$(document).offset().top
  })
});

这将使div＃mydiv与文档一起上下移动，假设其初始位置固定在顶部：0

我真的会使用CSS解决方案（绝对位置）而不是javascript。让浏览器做自己的事情而不是设置会不必要地占用资源的代码。