如何将侧边栏固定到页面顶部，但在其父元素内使用HTML / CSS [英] How to pin sidebar to the top of page but within its parent element using HTML/CSS only
问题描述
我可以创建一个粘贴的边栏，跟随你
HTML可以是这样的：
< body>
< header>
很多随机内容...
< / header>
< div id =parent>
< div id =sidebar><！ - 当您滚动过标题内容时，侧边栏应该保持在页面的顶部，当您继续滚动，但它不应该显示在顶部的标题内容。 - >
< / div
< / div>
< / body>
我希望这张照片让我更清楚我想要什么。到目前为止，我一直是一个糟糕的沟通者。
谢谢！
可以创建一个粘性边栏，
页面，但它保留在其容器元素内[仅使用HTML / CSS]？
http://codepen.io/jamesdarren/full/ivmcH
...但没有JavaScript。
答案是：目前，这取决于您的浏览器。 p>
CSS有一个实验性定位值，名为 粘性 。
code> position：sticky 它可以在其父容器和视口中保持固定，而不仅仅是视口。
如何 Google Developers 对此进行了描述：
position：sticky方式定位元素，而
概念上类似于position：fixed。不同之处在于$ c $ b元素与position：sticky的行为如position：relative
这里是 MDN 的用途：
粘性定位是相对定位和固定定位的混合体。
元素被视为相对位置，直到它跨越指定的
阈值，此时它被视为固定位置。
但是，目前，只有Firefox和Safari支持粘性定位。
以下是 position：sticky （仅限FF和Safari）的两个演示：
http://html5-demos.appspot.com/static/css/sticky.html a>
http://jsfiddle.net/daker/ecpTw/light/
这是一个位置：sticky polyfill：
https://github.com/filamentgroup/fixed-sticky
是粘性
元素限制为其父元素的尺寸。
最后，如果你决定放松你的语言约束以允许脚本，这里是一个简单，有效和可靠的解决方案粘贴边栏：
< blockquote>
Tether是一个JavaScript库，用于有效地使一个绝对
定位的元素保持在页面上另一个元素旁边。
包括在
视口，其滚动父面板，页面上的任何其他元素或固定的
边界框之间约束元素的能力。
http://github.hubspot.com/tether/
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!
Is it possible to create a sticky sidebar that follows you down the page but which stays inside of its container element [using HTML/CSS only]?
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:
position: stickyis a new way to position elements and is conceptually similar toposition: fixed. The difference is that an element withposition: stickybehaves likeposition: relativewithin its parent, until a given offset threshold is met in the viewport.
Here's MDN's take:
Sticky positioning is a hybrid of relative and fixed positioning. The element is treated as relative positioned until it crosses a specified threshold, at which point it is treated as fixed positioned.
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:
The most overlooked thing about
position: stickyis that sticky elements are constrained to the dimensions of their parent elements.
Lastly, should you decide to loosen your language constraints to allow scripting, here's a simple, effective and reliable solution for a sticky sidebar:
Tether is a JavaScript library for efficiently making an absolutely positioned element stay next to another element on the page.
Tether includes the ability to constrain the element within the viewport, its scroll parent, any other element on the page, or a fixed bounding box.
http://github.hubspot.com/tether/
这篇关于如何将侧边栏固定到页面顶部，但在其父元素内使用HTML / CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
