Question

我想用另一个元素定位div，但是当页面垂直滚动时使其保持原位。父元素比屏幕高度长。可以用CSS完成，还是需要使用jQuery（这是我通常使用的）？我会使用固定位置，但我不确定如何将它与父div相关联...

<div id="veryHighDiv">
   <div id="positionMe"></div>
</div>

所以，我需要它在水平位置的相对于父级的位置，但在垂直滚动时是“固定的”。

Answer 1

由于你最终希望它是固定位置，所以不需要将其作为相对启动，因为将其动态更改为固定会破坏你在相对（或通常是绝对的）定位中所做的任何CSS工作。

如果是我，我会写一个函数来计算固定元素应该在哪里，然后一定要在所有窗口事件上调用它，比如加载和调整大小以使其保持原位。这是一个示例，但您可能需要根据CSS的其余部分进行更改：

<script>

$(window).load(function() {
    positionElem();
});
$(window).resize(function() {
    positionElem();
});

function positionElem() {
    var padFromDiv = 30; // amount of padding you want from your div
    var newX = 0; // initialize newX at 0

    // get difference in window and veryHighDiv if window is larger
    if ($(window).width() > $('#veryHighDiv').width()) {
        newX = ($(window).width()-$('#veryHighDiv').width());
    }

    newX+=padFromDiv;

    $('#positionMe').css('left',newX);
}

</script>

Answer 2

如果你将一个绝对风格的div附加到一个相对div，我相信它会一直停留在相对div的任何地方。

<div id="veryHighDiv">
       <div id="positionmMe"> </div>
    </div>

#veryHighDiv {
  position: relative;
}

#positionMe {
  position: absolute;
  top: 50px;
  left: 100px;
}

Answer 3

使用jQuery非常简单 - http://jsfiddle.net/zA3mq/

$(window).scroll(function() {
    $("#positionMe").css('position', 'fixed');
});

将div相对于另一个元素定位

3 个答案: