我正在尝试修复一个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');
});

其他回答

这很简单(根据下面的HTML)

技巧是不要在元素(div)上使用“position:fixed;”的top或left。如果未指定这些元素,则“fixed content”元素将显示为相对于封闭元素(具有“position:RELATIVE;”的div)INSTEAD OF相对于浏览器窗口!!!

<div id="divTermsOfUse" style="width:870px; z-index: 20; overflow:auto;">
    <div id="divCloser" style="position:relative; left: 852px;">
        <div style="position:fixed; z-index:22;">
            <a href="javascript:hideDiv('divTermsOfUse');">
                <span style="font-size:18pt; font-weight:bold;">X</span>
            </a>
        </div>
    </div>
    <div>  <!-- container for... -->
         lots of Text To Be Scrolled vertically...
         bhah! blah! blah!
    </div>
</div>

上面的内容允许我在垂直滚动的div中的许多文本的顶部找到一个关闭的“X”按钮。“X”位于适当位置(不会随滚动文本移动,但当用户调整浏览器窗口的宽度时,它会随包围div容器向左或向右移动!因此,它垂直“固定”,但相对于包围元素水平定位!

在我开始工作之前,当我向下滚动文本内容时,“X”向上滚动并消失。

很抱歉没有提供我的javascript hideDiv()函数,但这将不必要地延长这篇文章的篇幅。我选择了尽量缩短。

位置:粘滞,这是一种新的定位元素的方法,在概念上类似于位置:固定。不同之处在于,在视口中满足给定的偏移阈值之前,具有position:sticky的元素在其父元素中的行为类似于position:relative。

在Chrome 56中(目前为2016年12月的测试版,2017年1月稳定):粘性现在又回来了。

https://developers.google.com/web/updates/2016/12/position-sticky

更多详情请参见“坚持你的着陆!”!位置:WebKit中的粘性土地。

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

所以你的代码应该是:

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

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

只需将顶部和左侧样式从固定位置div

<div id='body' style='height:200%; position: absolute; width: 100%; '>
    <div id='parent' style='display: block; margin: 0px auto; width: 200px;'>
        <div id='content' style='position: fixed;'>content</div>
    </div>
</div> 

#content div将位于父div所在的位置,但将固定在那里。

我的项目是.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>

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