问题描述
我环顾四周，看起来像是一个不行，但我只是为了以防万一。
是否可以创建一个紧跟你的粘性边栏在页面中，但它保留在它的容器元素中？
HTML可能类似于：
<身体GT;
< header>
很多随机内容...
< / header>
< div id =parent>
< div id =sidebar><！ - 当您滚动浏览标题内容时，边栏应继续滚动而停留在页面的顶部，但不应出现在顶部标题内容。 - >
< / div
< / div>
< / body>
我希望这张照片能让我更清楚自己想要的东西。到目前为止，我一直是一个糟糕的沟通者。
感谢您！
像这样：
...但没有JavaScript。
答案是：目前，它取决于您的浏览器。
CSS的实验定位值名为。 b 通过设置您的边栏到位置：sticky 它可以在其父容器和视口内保持固定，而不仅仅是视口。
以下是描述了它：
以下是的要求：
然而，目前只有。
以下是两个演示：位置：sticky （仅限FF和Safari）：
以下是位置：sticky 填充：
来自polyfill自述：
最后，如果您决定放宽语言限制以允许编写脚本，请使用简单，有效且可靠的侧边栏解决方案：
I've looked around and it seems like a no-go, but I ask just in case.
Is it possible to create a sticky sidebar that follows you down the page but which stays inside of its container element?
The HTML could be something like:
<body>
<header>
Lots of random content...
</header>
<div id="parent">
<div id="sidebar"><!-- when you have scrolled past the header content, the sidebar should stay at the top of the page as you continue scrolling, but it should not appear on top of the header content. -->
</div
</div>
</body>
I hope this picture makes it clearer what I am wanting. So far, I have been a lousy communicator.
Thank you!
Like this:
http://codepen.io/jamesdarren/full/ivmcH
... but without the JavaScript.
The answer is: At the present time, it depends on your browser.
CSS has an experimental positioning value named sticky.
By setting your sidebar to position: sticky it can remain fixed inside its parent container and the viewport, as opposed to just the viewport.
Here's how Google Developers describes it:
Here's MDN's take:
Currently, however, only Firefox and Safari support sticky positioning.
Here are two demos of position: sticky (FF & Safari only):
http://html5-demos.appspot.com/static/css/sticky.html
http://jsfiddle.net/daker/ecpTw/light/
Here's a position: sticky polyfill:
https://github.com/filamentgroup/fixed-sticky
from the polyfill readme:
Lastly, should you decide to loosen your language constraints to allow scripting, here's a simple, effective and reliable solution for a sticky sidebar:
http://github.hubspot.com/tether/
这篇关于Pin元素像位置：固定但在其父项内部，而不是视口的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！