CSS introduced the property position: sticky in 2012, one obvious application of this is for making sticky headers.
The idea is straightforward: ...
For further actions, you may consider blocking this person and/or reporting abuse
The reading progress bar is so cool, how can I use it? Please!
Hi Hussein, The code is available inside the codepen example. You can see the code by clicking on the tabs (HTML, CSS, JS). It requires some JS to work. So just keep this in mind if you want to use it yourself
Yeah I saw the resource button after you know am new here! But thanks for sharing and another thing you mean it can't work with just html css and JavaScript only??
No worries Hussein! This example requires JS because the progress bar is updated based on the position of the scrollbar of the window, this is not possible to do in CSS. The other examples use CSS only. I will add this to the post, so it is clear for everyone!
K thanks for that great post!! But isn't there any way I can use plain J's without importing the jQuery cause my blog where I wanted to do that it's a bit difficult!
Yes. You can make a few changes to the code, so it is plain JS. Then, you do not need to use JQuery.
Yeah that can work for me, you know am not so fluent with JavaScript so hope you can help me there cause I just want to use that bar on my blog.
Safari 13 doesn't require the prefix btw. Though Safari 12 does.
PR for caniuse update: github.com/Fyrd/caniuse/pull/5360
Nice! 💯
No probs. You also helped me add support for older iOS users for a feature I'm just implementing by reminding me of vendor prefixes for them as some iOS devices stuck with v12 and can't upgrade. So thanks right back at you! 😀
This is nice
thank you 🙂
Support for the new features is faster nowadays, thanks for the article 👍
Yes, thankfully! Im glad it was helpful :-)