9 ms·
H2 {position: sticky} [video]
- deleted 13y ago[deleted]
- deleted 13y ago[deleted]
- troels 13y agoThis seems like a very good idea, provided that the implementation makes sense. The current approach of using javascript to watch for scroll-offset is a bit clunky.
- micheljansen 13y agoI hope this improves performance when scrolling on iOS etc. It's currently almost impossible to get that right using javascript, because it's all hardware accelerated and scroll events don't fire reliably.
- panic 13y agoIt does! In fact, this is the reason sticky positioning exists. See the original proposal at http://lists.w3.org/Archives/Public/www-style/2012Jun/0627.html http://lists.w3.org/Archives/Public/www-style/2012Jun/0627.h...: Many web sites have elements that alternate between being in-flow and being position:fixed, depending on the user's scroll position. This is often done for elements in a sidebar that the page author desires to be always available as the user scrolls, but which slot into a space on the page when scrolled to the top. It can also be done for table headers which remain visible after the top of the table has been scrolled off- screen. Lots of sites, such as news.google.com (the "Top Stories" sidebar) and yelp.com (the search results map), use scroll event listeners in JavaScript to achive this effect. However, browsers are increasingly moving towards scrolling implementations that make use of hardware acceleration to improve performance, for example by leveraging the GPU, and doing scrolling on a thread other than the main UI thread. In this situation, browsers may use fast scrolling but fire scroll events asynchronously, which will result in rendering glitches on pages that update element positions from JavaScript via scroll events. Alternatively, the browser may fall into a slow scrolling mode when scroll events are listened for; this impacts the perceived quality of the browser's scrolling. To address this problem, common scrolling behaviors like this should be exposed declaratively, through CSS.
- Yaggo 13y agoGreat feature. Also landed on webkit.
- makepanic 13y ago`position: sticky` was working in Chrome(ium) a while ago but somehow the removed it.
- thomasbachem 13y agoBecause of this: https://code.google.com/p/chromium/issues/detail?id=145027 https://code.google.com/p/chromium/issues/detail?id=145027
- chrisacky 13y agoThis will be really awesome. For anyone who hasn't tried to implement a Sticky element before, it's actually not as trivial as you might think. (And when I was looking for an existing implementation, they didn't support the "constrain" effect that is explained in the video. To do it correctly, you need to track the up to 4 different element positions. You've got your actual sticky element, then you've got the parent of the element to ensure it's within the view port. Then you've got the scroll container as well. Plus, you might have a constrain/target node, to ensure that the sticky element doesn't extend passed an artificial bounding box. Overall, doing all of these domGeometry/position calculations on each window.onscroll event leads to extremely inefficient JS. I ended up removing the Sticky altogether because on iOS it would basically make my application unusable. Here was my implementation[1]. It was considerably harder to created than I expected it would be... coding advice/tips welcome. [1] : https://gist.github.com/Kalyse/6534936 https://gist.github.com/Kalyse/6534936 (My personal Sticky implementation using Dojo).
- yuchi 13y agoMy two cents. You'll never be able to match the scroll smoothly listening for scroll events. Use requestAnimationFrame and listen for changes in window.scrollTop.
- ars 13y agoListen for changes? Or poll for changes? Wouldn't your way consume a lot of unnecessary CPU?
- yuchi 13y agoNot exactly poll. Use scroll events to start your polling; after the second time your loop function doesn't find a change in the scrollTop, stop requesting frames. Even without this guard, with just the `old !== getScrollTop()` it doesn't eat so much CPU neither.
- corford 13y agoAmen to it being harder to _get right_ than first appears... I've been working on a floating/sticky scroll solution over the last couple of days and decided to go with fixed positioning to try and lessen the CPU load. Dealing with all the edge cases and trying to keep the code as sane as possible has been a complete bitch. Off loading all that to the browser would be a godsend. It's still a work in progress but this is what I have so far: http://pastebin.com/PWCCERXk http://pastebin.com/PWCCERXk
- panic 13y agoThis has been available on iOS since iOS 6. I'm surprised more people don't know about it!
- educating 13y agoIt's neat and useful but having text sometimes scroll under other text is going to be disorienting for some. Personally, though I like that it will be an option, I don't want it in my pages. For documentation it just gets in the way of other text to read. Headers are a marker and starting context- they don't need to continue to be displayed.
- iSnow 13y agoI am not sure I like how CSS gets bloated with special case behaviors like this. Sticky headers seem to me like animated gifs - something that is hugely popular for several years and then goes away silently because it is more eye candy than useful.
- Shish2k 13y agoHaving an always-visible "current section" header while scrolling a large document seems quite useful to me...
- iSnow 13y agoTable-based layout was useful and frequently easier too and we still abandoned it. I still believe this is behavioral markup and should be done in JS.
- etherealG 13y agomind explaining what you mean by behavioral markup?
- iSnow 13y agoCSS that tries to be a declarative approach to describing behavior. This is wrong in my opinion like HTML tags for styling were wrong. I think this is wrong because behavior is so incredibly complex that you end up defining rules for everything - and in the end, using a imperative language is much simpler. I know it's different, but the argument here http://dealloc.me/2011/06/24/d3-is-not-a-graphing-library.html http://dealloc.me/2011/06/24/d3-is-not-a-graphing-library.ht... applies in a similar way.
- josephers 13y agoAre you also then against CSS transitions?
- iSnow 13y ago
- mbrock 13y agoSticky table headers and columns: yes, yes, yes. That is very important for usability, and currently hard to do properly. If I could just add a layout attribute to a THEAD or COLGROUP, my life would be significantly easier. We've spent a lot of time implementing this ourselves for a data table containing lab analysis values. It's a big requirement from our customers. You can imagine it's pretty important to be able to match rows and columns (sample types and dates) correctly when you're looking at these values. The planning meeting about this was pretty funny. Boss: "So, we'll just make the headers fixed, should be easy, right?" Developer: "Heh-heh... Yeah, we could probably get that working decently in just a couple of weeks. We'll have to test it in all the browsers, of course, and do performance tests with big data sets. It's possible that we might not be able to get it to work well enough on all platforms, so we should have a backup plan." Boss: "Sigh. This would be so much easier in Visual Basic..."
- tluyben2 13y agoThe boss is right though. This (and a lot of other things) is much easier in almost every other GUI lib I worked with. Some things like documents (flowing text with images etc) are easier in HTML, but that is what it was made for.
- mbrock 13y agoIt's a little sad how basic presentation of tabular data is so tricky. That should be an essential part of a document-oriented technology. I guess a good solution would be a little too complex.
- inthewind 13y agoCan someone explain what 'Position: sticky' is please? As I'm having difficulty accessing the video: (I still seem to have lots of issues trying to watch videos in the browser. Even embedded Vimeo never works for me (Chrome/Debian/Linux), seems flash video is the only thing that consistantly works).
- skeletonjelly 13y agoAre you using Firefox? https://support.mozilla.org/en-US/questions/961627 https://support.mozilla.org/en-US/questions/961627
- inthewind 13y ago(I stated Chrome. But never have much luck in Firefox either. Anyhow, nevermind.)
- GhotiFish 13y agoIf you would like to watch the video, right click download this link: https://vid.ly/9u6k6d?content=video&format=webm https://vid.ly/9u6k6d?content=video&format=webm That should download the file directly, and you can watch it in a native player.
- inthewind 13y agoThanks. How I hate embedded video! I wish authors would at least give an alternative download for their resources. Beats having to dig around in the source. That one is a little too large a video a file size for my tariff, will have to watch later.
- sambeau 13y ago{position: sticky} It looks like it pins an element in a fixed position when it normal position has scrolled off the screen as long as it's parent container is visible on screen. It displaying it inline as normal when its position is visible onscreen. It can be used to make sticky-headers like iOS lists have: e.g. showing the letter of the alphabet at the top of the screen when scrolling through an address book . It will be really useful for keeping the row titles visible in a long scrolling table.
- anon1385 13y agoGreat job guys, it only took 11 years (plus however long it takes to get this into IE/Chrome/Opera…) to finally solve the problem of table headers in CSS: http://lists.w3.org/Archives/Public/www-style/2002May/0153.html http://lists.w3.org/Archives/Public/www-style/2002May/0153.h...
- kartoffelmos 13y agoIt's already implemented in Chrome (behind a flag, but it is there), and thereby soon in Opera. Perhaps even Safari. As for IE, yeah, you are going to have to resort to alternative solutions. Then again, if implemented properly, the lack of sticky positioning should not break the usability, only enhance it whenever present.
- hober 13y agoChrome (really Blink)'s implementation was inherited from Safari's implementation from before Blink forked from WebKit.
- nkerkin 13y agoWill this support horizontal scrolling also, e.g. freeze a table column?
- tyilo 13y agoyes, he says so in the video.
- wildster 13y agoIf everyone is using hacks like Bootstrap it makes sense to incorporate more of it into CSS.
- yaix 13y agoAs always, its a good idea if used correctly. Often, sticky headers are used and cover half the screen on small devices. Use it only if it actually helps usability!
- anaran 13y agoThat was a very good presentation. They don't seem to be interested in feedback on that site though. {position: sticky} will definitely be a great feature to have.
- k_bx 13y agoI guess it would be nice to add sticky attribute for "smart hide" of sticky things, like show them when you scroll up a bit, but hide when you scroll down, just as recent Chrome started doing.
- Pxtl 13y agoI utterly loathe this feature in Android Chrome. My constant instinct is to pull down the status bar like you pull down the notifications and quick-menu. Scrolling up to see it screws me up.
- ananth99 13y agoIt'd be awesome if this is possible for a horizontal setup too!
- blakeshall 13y agoI'm surprised no one has said anything about the intern. Decent presentation and solid work. Good on him.
- edo 13y agoThis is awesome, great work!
- ryanseys 13y agoThis is just awesome!
- syzo 13y agoI'd like to see this for footers; have the footer at the bottom of the browser if the content is too small, or the bottom of the webpage if the content is large enough for the user to scroll. After skimming the video, I'm not sure if this would be possible with "position: sticky".
- dep_b 13y agoHow about some usable centering of blocks instead?
- altero 13y agoCongratulation! Turbo Vision had this only 25 years ago, JS is catching up :-)
- armandososa 13y agoIt's not JS.
- andrew_gardener 13y agocorrect me if I'm wrong, but isn't the point of this that its CSS and not JS?
- 6cxs2hd6 13y agoI understand this works for sticky headers. Footers, too? e.g. You have a table and you want the header row(s) to be fixed, but _also_ footer row(s) with totals.
- cousin_it 13y agoThank you CSS, another way to keep ads and "social buttons" always in front of me. I want a browser addon that hides all position:fixed and position:sticky elements unconditionally, never seen a site that wouldn't be improved by that.
- stoodder 13y agoThis is especially huge for mobile web where the scroll event isn't fired until after scroll finishes and utilizing touch events leads to a pretty hacky and choppy solution. Bravo.