javascript - div 与另一个 div 的位置，即使它滚动

Question

<div class="mainDiv">

    <span class="foregroundImage" id="foregroundImage1"></span>

    <!-- Layer Code -->

    <div class="layerDiv">

    </div>

    <!-- Layer Code -->

</div>

我需要定位 layerDiv 使得

1. 它应该在 mainDiv 的中心（而不是在屏幕的中心）
2. mainDiv 高度和宽度是自动的，所以即使我向下滚动它也应该在中心的可见部分。

Answer 1

对于盒中的死点盒，请尝试

$('.layerDiv')
    .css('position','relative')
    .width('90%')
    .height('90%')
    .css('left', 
        (
          0.5 * $('.mainDiv').width() 
        - 0.5 * $('.layerDiv').width()
        )
    )
    .css('top', 
        (
          0.5 * $('.mainDiv').height() 
        - 0.5 * $('.layerDiv').height()
        )
    );

相应地调整宽度和高度 % 或分配 px 值

对于以滚动方式永久位于屏幕中心的居中框，请使用：

$('.layerDiv')
    .css('position','fixed')
    .width(.9*$('.mainDiv').width())
    .height(.25*$(window).height())
    .css('left',
        (
            0.5 * $('.mainDiv').width()
            - (
                0.5 * $('.layerDiv').width()
                - $('.mainDiv').offset().left
            )
        )
    )
    .css('top',
        (
            0.5 * $(window).height()
            - (
                0.5 * $('.layerDiv').height()
                - $('.mainDiv').offset().top
            )
        )
    );

这将是一个内框，占 maindiv 宽度的 90%，屏幕高度的 25%，在 div 内均匀居中，滚动时始终位于屏幕中间

Answer 2

您需要创建一个方法来查找主 div 的高度和宽度以及 layerDiv 的高度和宽度。

• layerDiv 的顶部位置 = mainDiv 高度的一半 - layerDiv 高度的一半
• layerDiv的左边位置=mainDiv宽度的一半-layerDiv宽度的一半

一旦你准备好这个方法，你就可以通过 JQuery 在文档加载和滚动事件上调用这个方法。

Answer 3

给图层 div 一个宽度，然后给 margin : 10px auto。您可以根据自己的喜好选择顶部/底部边距。它可以是任何固定值。不能是自动的。并且 layerDiv 必须有一个宽度。