我正在尝试修复一个div,使其始终保持在屏幕顶部,使用:

position: fixed;
top: 0px;
right: 0px;

然而,div位于居中的容器内。当我使用position:fixed时,它会相对于浏览器窗口修复div,例如它位于浏览器的右侧。相反,它应该相对于容器固定。

我知道position:absolute可以用来固定相对于div的元素,但是当您向下滚动页面时,元素会消失,并且不会像position:fixed那样固定在顶部。

有没有破解或解决方法来实现这一点?


当前回答

我也有同样的问题,我们的一个团队成员给了我一个解决方案。为了允许div定位并相对于其他div,我们的解决方案是使用父容器包装固定div和滚动div。

.容器{位置:相对;挠曲:1;显示:柔性;}.修复{位置:绝对;}<div class=“container”><div class=“scroll”></div><div class=“fix”></div></div>

其他回答

使用纯CSS,你无法做到这一点;至少我没有。然而,您可以非常简单地使用jQuery来实现。我会解释我的问题,稍加改动你就可以使用了。

因此,首先,我希望我的元素有一个固定的顶部(从窗口顶部),以及一个从父元素继承的左侧组件(因为父元素居中)。要设置左侧组件,只需将元素放到父元素中,并设置父元素的位置:relative。

然后,您需要知道当滚动条位于顶部(y为零滚动)时,元素距离顶部的距离是多少;还有两种选择。首先,它是静态的(一些数字),或者必须从父元素中读取它。

在我的例子中,它距离顶部静态图像150像素。所以,当你看到150时,它是当我们没有滚动时,元素从顶部开始的数量。

CSS

#parent-element{position:relative;}
#promo{position:absolute;}

jQuery

$(document).ready(function() { //This check window scroll bar location on start
    wtop=parseInt($(window).scrollTop());
    $("#promo").css('top',150+wtop+'px');

});
$(window).scroll(function () { //This is when the window is scrolling
    wtop=parseInt($(window).scrollTop());
    $("#promo").css('top',150+wtop+'px');
});

在这种情况下,可以根据父元素更改固定元素的位置。

可以使用以下代码获取父元素的位置。

function coordinatesSetter() {
    var elm = $('parentElement');
    var rect = elm.getBoundingClientRect(),
    scrollLeft = window.pageXOffset || document.documentElement.scrollLeft,
    scrollTop = window.pageYOffset || document.documentElement.scrollTop;

    return {top: rect.top + scrollTop, left: rect.left + scrollLeft});
 }

免责声明:

这正好回答了标题:固定位置,但相对于容器。对于实际的用例,用户需要定位:粘性是一种方法。


https://developer.mozilla.org/en-US/docs/Web/CSS/position

它相对于视口建立的初始包含块进行定位,除非其祖先之一的变换、透视或过滤器属性设置为非空

您只需要向容器添加一个变换,固定元素的位置将相对于容器。我认为一个变换:translateX(0);应该足够了。

如果您使用JavaScript,这是可能的。在本例中,jQuery插件Sticky Kit:

2019解决方案:您可以使用位置:粘性属性。

下面是一个示例CODEPEN,演示了用法以及它与位置的区别:fixed。

其行为说明如下:

具有粘性位置的元素基于用户的滚动位置来定位。它的作用基本上类似于position:relative,直到元素滚动超过特定偏移量,在这种情况下,它变成position:fixed。当它向后滚动时,它将返回到其先前(相对)位置。它影响页面中其他元素的流动,即占据页面上的特定空间(就像位置:相对)。如果它是在某个容器内定义的,则相对于该容器定位。如果容器有一些溢出(滚动),根据滚动偏移量,它将变为位置:固定。

因此,如果您想在容器内实现固定功能,请使用粘性。