Pin元素像位置：固定但在其父项内部，而不是视口 [英] Pin element like position: fixed but inside its parent not the viewport

查看：124 发布时间：2018/6/13 17:27:02 html css

本文介绍了Pin元素像位置：固定但在其父项内部，而不是视口的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我环顾四周，看起来像是一个不行，但我只是为了以防万一。

是否可以创建一个紧跟你的粘性边栏在页面中，但它保留在它的容器元素中？

HTML可能类似于：

 <身体GT; 
< header> 
很多随机内容... 
< / header> 
< div id =parent> 
< div id =sidebar><！ - 当您滚动浏览标题内容时，边栏应继续滚动而停留在页面的顶部，但不应出现在顶部标题内容。 - > 
< / div 
< / div> 
< / body>

我希望这张照片能让我更清楚自己想要的东西。到目前为止，我一直是一个糟糕的沟通者。

感谢您！

解决方案

是否有可能创建一个粘贴侧栏，
页面，但它保留在它的容器元素内部[只使用HTML / CSS]？

像这样：

http://codepen.io/jamesdarren/full/ivmcH

...但没有JavaScript。

答案是：目前，它取决于您的浏览器。

CSS的实验定位值名为 sticky 。 b 通过设置您的边栏到位置：sticky 它可以在其父容器和视口内保持固定，而不仅仅是视口。

以下是 Google Developers 描述了它：

位置：sticky 是一种定位元素的新方法，在
的概念上类似于 position：fixed 。不同之处在于，带有 position：sticky 的
元素的行为类似于 position：relative
直到在
视口中满足给定的偏移阈值。

以下是 MDN 的要求：

粘滞定位是相对和固定定位的混合体。
元素被视为相对定位，直到它超过指定的
阈值，此时它被视为固定定位。

然而，目前只有 Firefox和Safari支持粘滞定位。

以下是两个演示：位置：sticky （仅限FF和Safari）：

http://html5-demos.appspot.com/static/css/sticky.html a>

http://jsfiddle.net/daker/ecpTw/light/

以下是位置：sticky 填充：

https://github.com/filamentgroup/fixed-sticky

来自polyfill自述：

最常被忽视的东西abou t 位置：sticky 就是那个粘稠的
元素被限制到它们父元素的尺寸。

最后，如果您决定放宽语言限制以允许编写脚本，请使用简单，有效且可靠的侧边栏解决方案：

Tether

Tether是一个JavaScript库，用于高效地将绝对
定位的元素保留在页面上另一个元素旁边。

Tether包括限制
视口内的元素，其滚动父项，页面上的任何其他元素或固定的
边界框的能力。

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"> </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: sticky is a new way to position elements and is conceptually similar to position: fixed. The difference is that an element with position: sticky behaves like position: relative within 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: sticky is 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

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/

这篇关于Pin元素像位置：固定但在其父项内部，而不是视口的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文

Pin元素像位置：固定但在其父项内部，而不是视口 [英] Pin element like position: fixed but inside its parent not the viewport

问题描述

Tether

Tether

相关文章

前端开发最新文章

热门教程

热门工具

登录关闭

Pin元素像位置：固定但在其父项内部，而不是视口 [英] Pin element like position: fixed but inside its parent not the viewport

问题描述

Tether

Tether

相关文章

前端开发最新文章

热门教程

热门工具

登录 关闭

登录关闭