css - 调整浏览器大小时上移固定位置的 div

Question

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

我需要使用“top”属性而不是“bottom”，因为 div 必须与上边距对齐，并且根据其内容可能具有不同的高度。我想我需要类似“最小底部”属性的东西。

有办法吗？

Answer 1

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

1. 绑定(bind)浏览器的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);
    }
});