在調整瀏覽器大小時向上移動固定位置div

Question

我有一個固定頂部位置的div。它幾乎在屏幕中間開始，所以如果瀏覽器窗口太小，由於滾動條被禁用，div的一部分消失。

我需要使用「頂部」屬性而不是「底部」，因爲div必須與頂部邊距對齊，並且根據其內容可能會有不同的高度。我想我需要像「最低限度」的財產。

有沒有辦法做到這一點？

Answer 1

這就是我將如何做 - 對不起，我只知道jQuery的方式來做到這一點。但我相信你可以查找每個步驟的非jQuery方法並實現它。

1. 綁定到瀏覽器
2. 在調整大小的調整大小事件得到窗口
3. 的高度。如果DIV是不是在屏幕上，然後調整頂部的CSS屬性

未經測試的代碼

$(window).resize(function() { 
    var mydiv = $('#mydiv'); 
    var bottomOfMyDiv = $(mydiv).offset().top + $(mydiv).height(); 
    var bottomOfWindow = $(window).height(); 
    if (bottomOfMyDiv > bottomOfWindow) { 
     //adjust top css property 
     $(mydiv).css('top', topvalue); 
    } 
});