调整浏览器大小时，向上移动固定的div

Question

我有一个固定顶部位置的div。它几乎在屏幕中间开始，所以如果浏览器窗口太小，由于滚动条被禁用，部分div就会消失。

我需要使用“top”属性而不是“bottom”，因为div必须与上边距对齐，并且取决于其内容可能具有不同的高度。我想我需要一些像“最小底”的财产。

有办法做到这一点吗？

Answer 1

我就是这样做的 - 抱歉，我只知道jQuery的方法。但我相信你可以为每个步骤查找非jquery方式并实现它。

1. 绑定到浏览器的resize事件
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);
    }
});