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

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

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

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

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


当前回答

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

其他回答

我的项目是.NET ASP Core 2 MVC Angular 4模板和Bootstrap 4。将“粘性顶部”添加到第一行的主应用程序组件html(即app.component.html)中,效果如下:

<div class='流动粘性顶部'><div class='col-sm-12'><导航菜单顶部></nav菜单顶部></div></div><div class=“row”><div class='col-sm-3'><nav menu></nav menu></div><div class='col-sm-9正文内容'><路由器出口></路由器出口></div></div>

这是惯例还是我把它简化了?

答案是肯定的,只要在将div位置设置为固定后不设置left:0或right:0。

http://jsfiddle.net/T2PL5/85/

签出侧边栏div.它是固定的,但与父级相关,而不是窗口视图点。

正文{背景:#ccc;}.包装器{边距:0自动;高度:1400px;宽度:650px;背景:绿色;}.侧边栏{背景色:#ddd;浮动:左侧;宽度:300px;高度:100px;位置:固定;}.主要{浮动:右侧;背景色:黄色;宽度:300px;高度:1400px;}<div class=“wrapper”>包装器<div class=“sidebar”>侧边栏</div><div class=“main”>main</div></div>

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

如果你改变立场,你有一个解决方案:固定;定位:粘性;

所以你的代码应该是:

position: sticky;
top: 0;
right: 0;

现在其他潜水艇不会滑到下面。

当您使用position:fixed CSS规则并尝试应用top/left/right/bottom时,它会相对于窗口定位元素。

解决方法是使用边距财产,而不是上/左/右/下