位置:向左下方粘 [英] position: sticky to bottom left
问题描述
我刚刚在FF32&带有position: sticky的Safari 7.它可以完美地与top: 0px或left: 0px一起使用(水平粘贴)，但是当我尝试bottom: 0px甚至更好时，结合使用bottom: 0; left: 0，它似乎不会起作用，它不会将自身设置在底部元素.可以在这里尝试这种行为: http://html5-demos.appspot.com/static/css/sticky.html ，只需将top: 10px属性更改为bottom: 0.那不行吗?
I have just been playing around in FF32 & Safari 7, with position: sticky. And it works perfecly with top: 0px or left: 0px (to stick horizontally), but it doesn't seem to work when I try bottom: 0px or even better, combine bottom: 0; left: 0 it doesn't set itself to the bottom of the element. This behaviour could be tried out here: http://html5-demos.appspot.com/static/css/sticky.html, by simply changing the top: 10px attribut to bottom: 0. Is that not supposed to work?
我认为将某物粘贴到底部是一种有效的用例，就像将某物粘贴到顶部一样. 在我们的例子中是这样，因为我对水平滚动具有粘性，但我希望此元素位于父元素的底部.
I think it is a valid use-case to stick something to the bottom in the same way as one would want to stick something to the top. In our case it is, because I am interested in having something sticky on horizontal scroll, but I want this element to be at the bottom of the parent element.
无论如何，欢迎任何建议和更多信息.
Anyway, any suggestions and extra info are welcome.
推荐答案
position: sticky;
bottom: 30px;
有效.请记住，sticky元素是相对于其父级的.
does work. Keep in mind sticky elements are relative to their parent.
http://codepen.io/corysimmons/pen/QyBMXN?editors=1100 (在Firefox中)
http://codepen.io/corysimmons/pen/QyBMXN?editors=1100 (in Firefox)
在这种情况下，<section>(蓝色区域)是父级.
In this case, <section> (the blue area) is the parent.
尽管 https://github.com/wilddeer/stickyfill，它不适用于Stickyfill #what-it-doesnt
我建议您使用它一段时间，直到您掌握它为止.
I suggest you play around with it for a bit longer til you get the hang of it.
让我知道您是否需要一个表现像position: sticky的JS插件，而不必使用position: sticky(尽管不能等待浏览器支持或更强大的polyfill).
Let me know if you need a JS plugin that will behave like position: sticky without having to use position: sticky (can't wait for browser support or a stronger polyfill though).
这篇关于位置:向左下方粘的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
