Question

我已经制作了一个JSFiddle，我试图在用户滚动时让DIV在视口中垂直固定，但保留在标题下。

但是，当您向下滚动到Javascript启动的位置时，带有绿色边框的固定DIV会弹出到视口的右边缘。

如何限制绿色DIV以使其保持在包含DIV的红色边界内？理想情况下，它的水平位置会相对于容器的右边缘保持固定。

CSS：

header {
   width: 100%;
    height: 10em;
    border: purple thin solid;
}
#container {
    border: thin solid red;
    position: relative;
    height: 100%;
    max-width:30em;
    margin: 0 auto 0 auto;
}
#staticRight {
    border: green thin solid;
    display: inline-block;
    float: right;
    right: 0;
    margin: 2em 0 0 0;
    width: 120px;
    height:600px;
    font-size: .82em;
    line-height:2em;
}
article {
    border: blue thin solid;
    max-width: 20em;
}

使用Javascript：

var elementPosition = $('#staticRight').offset();
$(window).scroll(function () {
    if ($(window).scrollTop() > elementPosition.top) {
        $('#staticRight').css('position', 'fixed').css('top', '0');

    } else {
        $('#staticRight').css('position', 'static');
    }
});

Answer 1

试试这段代码。同时将right提供给您的staticRight div

$('#staticRight').css('position', 'fixed').css('top', '0').css('right','20px');

相反

$('#staticRight').css('position', 'fixed').css('top', '0');

<强> DEMO

Answer 2

当你将一个元素设置为fixed时，它会离开流程，从而将父元素设置为相对无关紧要。固定div位于相对于浏览器窗口的所需坐标处。因此，如果您可以通过浏览器计算左侧位置，只需在将其更改为固定时将其添加到$(window).scroll即可。您的代码应如下所示 -

<div id="staticRight" style="position: fixed; top: 0px; left: 70%;"></div>

如何让这个由Javascript设置的固定位置的DIV保持在包含DIV内？

2 个答案: