jquery - 相对于另一个元素定位 div

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');
});