如何在視口上固定div

Question

我在屏幕上有一個固定的div（ #mydiv)並且在視口中固定為0p x， 1000px height為#mydiv) ，屏幕尺寸為1280 x 800 px，文檔高度為1600px；

所以我從div高度上損失了200px ，如何計算Im滾動時顯示的頂部位置？ 返回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的初始位置固定在top：0，它將使div＃mydiv與文檔一起上下移動

我真的會使用CSS解決方案（絕對位置）而不是javascript。 讓瀏覽器執行其任務，而不是設置將不必要地占用資源的代碼。