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

时间:2012-06-19 19:32:06

标签: jquery css

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

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

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

3 个答案:

答案 0 :(得分:2)

由于你最终希望它是固定位置,所以不需要将其作为相对启动,因为将其动态更改为固定会破坏你在相对(或通常是绝对的)定位中所做的任何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>

答案 1 :(得分:1)

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

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

#veryHighDiv {
  position: relative;
}

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

答案 2 :(得分:1)

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

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