Scroll Indicator without JavaScript

Scroll indicator is a better experience for users when surfing the article page. This styling could be with Javascript, and here also only css. 

HTML is contained two parts: the fixed header with the title, and the main part with the article details.  

The header should be fixed for good looking. And the main part move down more than the height of header using margin-top.  Setting padding to percenetage makes the content in the center of the page ,which is responsive website. 

@supports  The @supports CSS at-rule associates a set of nested statements, in a CSS block, that is delimited by curly braces, with a condition consisting of testing of CSS declarations, that is property-value pairs, combined with arbitrary conjunctions, disjunctions, and negations of them. Such a condition is called a supports condition.

@supports(prop:value) {
 /* more styles */
}

height:100vh means the height of display window. 

Giving the body a background, linear-gradient(to right top,#887793 50%,#ccc 50%). The gradient direction is left bottom to right top corner and two color, meanwhile 50% is the stop gradient color, which means no gradients between. Like below:

Background-position move down the height of header so that the corner of left top is in the main part. Like below:

Background-size is measurable that x-axis is 100% and y-axis is the left height of the article. Using calc() function calculates , the 100% height total minus the height of visible window,then plus the indicator height. 

Attention! When I was coding, I lost the space inside the calc() so that I cost lots of time debugging. Make sure the - operation is working. 

Full code in my Codepen Here