保持div2與屏幕的左側，底部和右側齊平，但始終位於div1上方400px以下嗎？

Question

我有兩個div，一個在頂部（div1），一個在底部（div2）。

我要完成的工作：div2應該始終比div1低400px，但是...我希望div2的左側，底部和右側始終與瀏覽器窗口齊平。 無論屏幕大小如何，這3面始終應齊平。 我怎樣才能做到這一點？

到目前為止，我已經嘗試過：

.background-oval {
    background-color: #999;
    border-top-left-radius: 100%100px;
    border-top-right-radius: 100%100px;
    bottom: 0;
    height: 400px;
    position: absolute;
    width: 100%;
}

Answer 1

var div1 = document.getElementById("div1");
var div2 = document.getElementById("div2");

document.body.addEventListener("scroll", function(e) {
    div2.style.top = Math.max(
        - -(div2.style.top.slice(0, -2)) + div2.height + 400,
        document.body.scrollTop + innerHeight - div2.height
    ) + "px";
}

注意： - -是將字符串轉換為數字的一種方法

注意2：假定div2具有位置屬性和高度