Recent searches
Search options
#CSS wizards: I need your help. I want to make a scroll indicator bar for my blog which show how much of the article is left to read, and I want to do so without without Javascript, like here:
https://css-tricks.com/books/greatest-css-tricks/scroll-indicator/
The problem with that trick linked above is that the progress bar is rendered behind the text and images of the post content. Do you know of any tricks to help bring the progress bar into the foreground while keeping the rest working as intended?
I think I can make it work if there was a way to clip part of the post's div in screen space. The clip-path property only works relative to the position of element, what I'd need is to define a fixed-position region and clip the post there. Can't find a way to do it or even anyone mentioning something like that, so maybe I'm using the wrong terms.
Ok I caved and just added some very minimal javascript. Even if it were possible to do in pure CSS it would have been an utter hack. This way it looks much nicer. I'll promise to never make JS a requirement though, I'll only use it for nice little additions that won't cause troubles when it's disabled.
@tracefree increase the Z index of that element.
https://www.w3schools.com/cssref/pr_pos_z-index.php
@NiwlCraft Tried that, doesn't work with this method since the progress bar needs a fixed-position div on top to block out the large triangle outside where the bar should appear, the post is completely hidden when I bring that into the foreground
@tracefree probably way above my paygrade, but it might be easier to see the issue if you try to implement it on your blog and post a link so we can fiddle with the css in the browser?
@redmountainman1 The article links to a playground implementation that can be fiddled with more easily: https://codepen.io/chriscoyier/pen/MWwGaVG
@tracefree if it help, I also can't think of a reasonable way to do it without js
scroll is not a readable property for css, im not sure it's even a concept
even with visibility triggers im not sure how you'd transfer that out of the element being scrolled
js was made for these tiny cases, it has a place in normal webs that are not accursed with libraries
@efi Yeah, I was mostly trying to avoid JS for the street creds, but it's fine in small doses :P
The article I linked had a clever solution but I couldn't find a way to get around the caveat of layering. I'm sure it's somehow possible, but not neatly