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.
@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