W3C home > Mailing lists > Public > public-css-archive@w3.org > April 2019

Re: [csswg-drafts] [css3 positioning] support position:sticky inside an overflow:hidden|auto on general parents (#865)

From: jonjohnjohnson via GitHub <sysbot+gh@w3.org>
Date: Thu, 25 Apr 2019 23:24:48 +0000
To: public-css-archive@w3.org
Message-ID: <issue_comment.created-486872448-1556234687-sysbot+gh@w3.org>
@valtlai @WangXBruc I don't exactly condone this fix, but if you really need some sort of nested separate scroller with separate axis treatment, this is the best approach yet.
https://uxdesign.cc/position-stuck-96c9f55d9526

@OliverJAsh @emilio Gecko bug for renaming/implementing `overflow: clip`.
https://bugzilla.mozilla.org/show_bug.cgi?id=1531609

@Baedda Tangentially...
> The fact that overflow: hidden; on an ancestor makes this container become the new scrolling container for the sticky element, takes away the opportunity to clip the sticky container in any way.

There are other ways to "clip" the sticky container, by using `clip-path`, even though the "overflow" can affect the geometry of scrollable content, it still behaves well in most cases. 

@joma74 
> No clue for in combination with scroll-snap on parent. Page with 100vh per section, sticky as dynamic css for header nav part of first section overflows the scroll bar.

You can use `calc()` to offset a "fullscreen" height with a sticky nav. But some browsers (iOS safari) don't report `100vh` as the height of the unscrolled viewport. (https://nicolas-hoizey.com/2015/02/viewport-height-is-taller-than-the-visible-part-of-the-document-in-some-mobile-browsers.html)

@Baedda @joma74 check these demos for examples of sticky/clip-path/calc()/vh
- https://jsbin.com/tedowel/edit
- https://jsbin.com/lefekiv/edit
- https://jsbin.com/subojom/edit

-- 
GitHub Notification of comment by jonjohnjohnson
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/865#issuecomment-486872448 using your GitHub account
Received on Thursday, 25 April 2019 23:24:50 UTC

This archive was generated by hypermail 2.4.0 : Tuesday, 5 July 2022 06:41:46 UTC