CSS Scroll Indicator

HTML
<header> <h1>CSS Scroll Indicator</h1> </header> <section> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sit amet vulputate nunc, quis tristique risus. Curabitur a mi rutrum, pellentesque odio id, mattis sem. Vivamus lacus ipsum, auctor et libero eget, semper semper velit. Donec porta mollis dolor non rhoncus. Aliquam porta diam id dolor porta rhoncus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam sed dapibus erat. Morbi ut nisi vitae diam sodales auctor et eget quam. Etiam ut sollicitudin diam. Mauris iaculis lorem metus, vel sagittis neque viverra vel. Proin imperdiet, lectus ac vestibulum bibendum, ipsum massa imperdiet felis, nec ornare ligula tellus vitae enim. Nullam vestibulum mattis pulvinar. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc non aliquam eros, eget efficitur elit. Fusce in risus sed lectus sodales cursus et eu augue. </p> <p> Suspendisse lorem elit, volutpat suscipit sapien sagittis, rutrum commodo odio. Fusce massa nunc, blandit scelerisque laoreet eget, blandit a nisi. Curabitur blandit, sapien eget semper ornare, nibh metus porttitor elit, sed porttitor nisi diam eget justo. Donec interdum tincidunt blandit. Curabitur mollis quis lorem vitae consequat. Integer vel lorem facilisis, tincidunt elit id, vulputate quam. Pellentesque egestas luctus turpis nec auctor. </p> <p> Phasellus vitae massa diam. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce blandit ut est nec viverra. Aenean porta mauris ac mauris auctor suscipit. Suspendisse porttitor lectus in consectetur molestie. Mauris euismod molestie justo vitae dictum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sit amet neque volutpat, sollicitudin arcu vitae, faucibus neque. Nulla eget risus ultrices, fermentum libero sit amet, tempus ligula. Etiam porta lectus eu elit bibendum imperdiet. Duis tempor imperdiet elit. Praesent ut arcu a odio venenatis mattis sed a neque. Morbi sit amet tellus maximus, ornare nibh a, porttitor purus. Praesent ac libero erat. </p> <p> In hac habitasse platea dictumst. Nam et egestas nulla. Morbi commodo felis vitae sapien dictum, nec mattis enim viverra. Curabitur et ultrices nisi. Sed dolor justo, luctus et venenatis id, efficitur vel ante. Integer vehicula ut metus sed lobortis. Mauris lobortis nunc quam, sit amet eleifend ante luctus vitae. Suspendisse luctus neque at magna accumsan, quis accumsan tortor semper. Sed pretium vehicula augue sit amet lacinia. Suspendisse leo odio, pretium ut mauris at, fringilla egestas justo. Ut eu rhoncus nisl. Aliquam vel fermentum tortor. Vivamus at erat malesuada, laoreet diam vitae, congue enim. Morbi congue in tortor id euismod. Quisque et vehicula ligula, vitae fringilla nisi. </p> <p> Nullam fermentum, lectus eget suscipit pulvinar, mauris velit finibus purus, eget aliquet nibh felis et sem. Pellentesque at turpis in lectus varius consectetur non eu elit. Nam congue fringilla sapien vitae volutpat. Etiam pretium dolor id augue hendrerit rhoncus. Cras auctor rhoncus magna, eget suscipit elit mattis vel. Nam nisl nunc, vehicula nec eros eu, ornare hendrerit diam. Cras nec lacus elit. Suspendisse eget nulla auctor, consectetur sapien sit amet, egestas eros. Nunc pulvinar lobortis nisl, a dignissim nibh elementum nec. Sed id porta elit, a pulvinar elit. Pellentesque ut ipsum efficitur, volutpat est eget, luctus justo. Sed gravida augue nec ex egestas, ac blandit lacus tempus. Sed blandit metus quis mi finibus eleifend. Cras maximus scelerisque placerat. </p> <p> Curabitur condimentum hendrerit lectus at auctor. Proin gravida, mauris a dictum gravida, lacus mauris gravida libero, nec ornare quam dui in urna. Curabitur sapien tortor, eleifend at egestas vel, interdum eu tortor. Vestibulum eu porta elit. Sed auctor elit at sapien rhoncus, non aliquet risus viverra. Duis magna dui, molestie non ultrices vitae, viverra a felis. Sed ut magna odio. Nullam ac ultricies tortor, sit amet iaculis neque. Phasellus ac tempus arcu, a laoreet libero. In imperdiet convallis urna porta commodo. Pellentesque malesuada, turpis in faucibus tristique, mauris orci tristique leo, vitae sagittis sapien magna sed orci. Sed commodo, quam id semper lacinia, odio elit euismod arcu, ac lacinia felis lorem eget massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p> <p> In consequat bibendum quam, a aliquet felis hendrerit sed. Praesent ut nisi sit amet libero semper efficitur. Fusce blandit purus in pulvinar pulvinar. Vestibulum sit amet nisi vitae nibh tempor aliquam ut non elit. Pellentesque tincidunt consequat tellus, et pretium diam porta eu. Phasellus et leo eros. Sed a mi massa. Nullam elit orci, convallis ut varius vel, placerat vitae erat. Nullam nisl metus, commodo ultricies elit non, maximus accumsan urna. </p> <p> Nullam efficitur nec orci suscipit bibendum. Sed maximus tempus leo, eu viverra ex facilisis ac. Quisque a vulputate ipsum, non tempus ligula. Morbi vitae augue nec risus elementum elementum. Phasellus eu purus a tortor tempus tincidunt. Duis mollis velit in sem pulvinar ultrices. Phasellus vitae rutrum eros, sed malesuada risus. In rutrum, nibh ut blandit faucibus, risus justo euismod felis, at tristique est justo non urna. Pellentesque eget metus nulla. Aliquam suscipit aliquam nunc vel maximus. Sed auctor urna ut porta pulvinar. Donec semper, mi eget ultricies pharetra, orci erat tincidunt ex, sed iaculis urna magna eu magna. Nam rutrum sodales fermentum. Nullam id eros in enim porttitor hendrerit. Aenean posuere elit consequat neque sollicitudin consequat. Vestibulum id lectus vel diam finibus congue semper ut massa. </p> <p> Maecenas rutrum erat sed orci iaculis, ac mollis quam elementum. Ut a interdum ipsum. Donec dignissim magna nec turpis viverra pharetra. Nulla id quam urna. Phasellus nec auctor arcu, et lobortis mauris. Vestibulum accumsan nibh sit amet justo aliquam, ac facilisis eros dignissim. Donec sit amet tincidunt magna, vitae sollicitudin diam. </p> <p> Aliquam lobortis leo id turpis porta, eget malesuada nibh interdum. Donec et lorem rutrum, tempor est quis, venenatis odio. Ut egestas orci eu purus convallis, in cursus odio suscipit. Donec in sapien sit amet enim ultrices consectetur. Nam congue efficitur mollis. Morbi egestas lorem eget odio efficitur, at mollis ex condimentum. Nunc nec ante aliquet, ullamcorper ligula vel, vulputate tortor. </p> <p> Sed pretium est ac sem ornare, ut suscipit lacus tempor. Duis ultricies nisl at ligula bibendum efficitur. Morbi feugiat quis tellus sed posuere. Aenean arcu enim, accumsan quis pulvinar pulvinar, iaculis nec velit. Sed eget elit quis lacus ullamcorper facilisis et condimentum erat. Pellentesque dignissim augue aliquam mi vehicula tincidunt. Ut hendrerit, ex eget tempor vehicula, massa lacus blandit nibh, eu scelerisque eros purus id nibh. Vivamus vel orci in arcu efficitur sollicitudin. </p> <p> In purus velit, aliquet ac nulla ac, mattis porta arcu. Duis efficitur at elit vel aliquet. Fusce ut velit ac dui faucibus pulvinar non vel orci. Nunc at tempor eros, pretium tempor orci. Mauris feugiat ultricies dolor, vel fringilla ex tempor vel. Praesent ac rutrum velit, in vehicula felis. Phasellus convallis mi quam, sit amet elementum ipsum mattis id. Vivamus sed lacus odio. </p> <p> Pellentesque eget ante rutrum, luctus felis vitae, vehicula risus. Ut congue ante eu condimentum lacinia. Quisque nec metus enim. Vivamus et mi sodales nulla feugiat tempor. Nam ut venenatis nisl. Vivamus augue tellus, tristique nec nunc at, elementum vulputate urna. Aliquam vel arcu sem. Duis at lacus vel dui egestas egestas in eu urna. Nullam non sem et turpis tempus sagittis. Duis mattis mattis erat, at suscipit quam posuere vel. Fusce tempor luctus lectus in eleifend. Sed pellentesque lorem at neque eleifend dignissim. Nulla sit amet varius augue. </p> <p> Phasellus cursus nulla arcu, ac consectetur odio auctor nec. Morbi tincidunt non turpis a consequat. Vestibulum iaculis, arcu eget laoreet dapibus, lorem sem maximus turpis, id imperdiet dui mauris ut tortor. Proin sit amet viverra mi. Nam eleifend aliquam felis nec cursus. Cras sodales sapien metus, ut eleifend orci egestas eu. Nulla semper tellus vitae turpis egestas pharetra. In ac augue lobortis, tristique purus ut, consequat risus. Mauris in placerat ipsum, ac laoreet ante. Mauris eget est ultricies, finibus mauris a, rutrum erat. </p> <p> Aliquam vitae enim tincidunt, bibendum nibh non, facilisis sem. Vivamus eu lacus mi. Proin bibendum velit sem, eu venenatis augue blandit vel. Aliquam erat volutpat. Mauris feugiat tincidunt lorem, sed commodo sem luctus non. Quisque sodales fringilla est, at accumsan ante accumsan non. Sed sit amet diam bibendum velit egestas cursus. Donec aliquam felis sit amet turpis eleifend, vitae auctor elit bibendum. Curabitur pellentesque condimentum imperdiet. Nullam urna justo, mattis a velit sit amet, cursus laoreet est. Vivamus vitae arcu dignissim, viverra diam ac, consequat lorem. Ut non sagittis metus. Sed porta eleifend ligula, sed congue eros viverra ac. Nam auctor euismod tempor. Integer bibendum condimentum ligula, ac tristique neque consequat eu. Maecenas tincidunt, tellus ullamcorper congue fringilla, turpis ex elementum lacus, et suscipit ex ex a dui. </p> <p> Etiam facilisis at elit non eleifend. Phasellus non mauris eget est tempus eleifend. Fusce iaculis vehicula interdum. Integer tincidunt arcu eget nisl facilisis, non vehicula odio ultrices. Donec malesuada neque at dui porttitor, vel viverra turpis iaculis. Praesent in mollis justo, et pellentesque velit. Nunc accumsan nisl ut ex imperdiet rutrum. Curabitur fringilla, nisi nec pulvinar aliquam, dui ligula rutrum sem, eget pretium felis quam nec risus. Praesent condimentum a nunc non varius. </p> <p> Duis blandit est est, eget consectetur mauris varius et. Aliquam ac luctus felis, at scelerisque urna. Sed et dui sollicitudin orci gravida dapibus ac a tellus. Praesent tincidunt interdum mauris vitae tempor. Fusce sed nisi metus. Mauris molestie elementum justo in gravida. Vivamus tincidunt finibus mauris sed maximus. Maecenas quis nisl in est tempus volutpat. Sed vel tortor augue. Mauris suscipit, eros sed dictum blandit, justo lectus consequat orci, sit amet vehicula purus est ut dolor. Integer sagittis magna sed efficitur accumsan. Vivamus rutrum ante non dui facilisis luctus. Aenean ac diam gravida, laoreet purus in, imperdiet sapien. Nam nisi purus, elementum eu tincidunt vitae, pulvinar eu arcu. Proin pulvinar, augue et pretium ultrices, massa neque imperdiet metus, ut semper orci sapien in nunc. </p> <p> In aliquam nisi lectus, ut auctor risus commodo et. Suspendisse nec ultrices lacus. Mauris eget dui eu risus porta viverra. Aliquam id mi nisl. Praesent consequat vestibulum leo, eu congue augue volutpat eu. Integer in sollicitudin libero. Integer malesuada efficitur consectetur. Vivamus commodo et sapien in sollicitudin. In varius rhoncus ultricies. </p> <p> Donec nec faucibus ligula, non ultrices massa. Sed id enim ac ex faucibus vehicula vitae suscipit lectus. Fusce in accumsan lacus. Proin tincidunt aliquet arcu, commodo finibus turpis blandit vitae. Suspendisse ornare, metus quis varius malesuada, magna leo pretium massa, vel aliquet nisi orci a arcu. Fusce quis lacinia nisl. Mauris iaculis lobortis nisl a posuere. Etiam porta id justo a fringilla. Vivamus a mi id erat tempus mollis eget at quam. Aenean elit mauris, ultricies a ornare a, pharetra quis nibh. Vivamus volutpat sodales finibus. </p> <p> Ut iaculis massa eros, a auctor purus faucibus non. Donec consectetur tellus eu dolor sollicitudin lobortis. Curabitur odio velit, tempus id venenatis non, rutrum iaculis ante. Maecenas condimentum elementum augue. Mauris porta, enim et blandit porta, lacus tellus sodales turpis, at lobortis erat sem id mauris. Nulla auctor augue a ipsum feugiat interdum. Mauris sed mattis mi. Nulla vitae libero auctor eros accumsan lobortis eu egestas ligula. Nam semper condimentum purus, eget ultrices dui luctus sed. In ultricies lobortis enim, vel porta magna auctor accumsan. Aliquam nec enim nec ante vulputate porta sed et enim. </p> </section>
SCSS
html,body{margin:0;} header{ position: fixed; top:0; height: 100px; width: 100%; background: white; } section{ margin-top: 105px; } section,header{ padding: 10px 10%; box-sizing: border-box; } body{ font-family: Arial,Helvetica Neue,Helvetica,sans-serif; font-size: 16px; background: linear-gradient(to right top, #ff0000 50%, #DDD 50%); background-size: 100% calc(100% - 100vh + 105px); background-repeat: no-repeat; } body:before{ content:''; position: fixed; top: 105px; bottom: 0; width: 100%; z-index: -1; background: white; }
JAVASCRIPT
Expand for more options Login