<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <style> .container-ext { padding-left: 180px; padding-right: 180px; } .headline { line-height: 30px; text-shadow: 1px 1px rgba(255, 255, 255, 0.3); } ul { list-style: none; } .headline-left { left: 30px; } .headline-right { top: 20px !important; /*bottom:370px !important;*/ right: 20px; } .headline-active { position: fixed; top: 100px; } .list-author:before, .list-author:after { content: "\200e"; display: table; } .list-author:after { clear: both; } .list-author-vocal { float: left; margin-right: 10px; } .ff { position: fixed; } </style> </head> <body> <div class="container-ext"> <div class="headline headline-left headline-active"> <ul class="list-author"> <li class="list-author-vocal"> A </li> <li class="list-author-vocal"> B </li> <li class="list-author-vocal"> C </li> <li class="list-author-vocal"> D </li> <li class="list-author-vocal"> E </li> </ul> <ul class="list-author"> <li class="list-author-vocal"> F </li> <li class="list-author-vocal"> G </li> <li class="list-author-vocal"> H </li> <li class="list-author-vocal"> I </li> <li class="list-author-vocal"> J </li> </ul> <ul class="list-author"> <li class="list-author-vocal"> K </li> <li class="list-author-vocal"> L </li> <li class="list-author-vocal"> M </li> <li class="list-author-vocal"> N </li> <li class="list-author-vocal"> O </li> </ul> <ul class="list-author"> <li class="list-author-vocal active"> P </li> <li class="list-author-vocal"> R </li> <li class="list-author-vocal"> S </li> <li class="list-author-vocal"> T </li> <li class="list-author-vocal"> V </li> </ul> <ul class="list-author"> <li class="list-author-vocal"> W </li> <li class="list-author-vocal"> Y </li> <li class="list-author-vocal"> Z </li> </ul> <div class="ff" style="left: 69px; top: 115px; width: 3px; height: 3px; background: blue;"></div> <div class="ff" style="left: 173px; top: 115px; width: 4px; height: 3px; background: blue;"></div> <div class="ff" style="left: 173px; top: 115px; width: 4px; height: 3px; background: blue;"></div> <div class="ff" style="left: 173px; top: 115px; width: 4px; height: 3px; background: blue;"></div> <div class="ff" style="left: 173px; top: 115px; width: 4px; height: 3px; background: blue;"></div> <div class="ff" style="left: 173px; top: 115px; width: 4px; height: 3px; background: blue;"></div> <div class="ff" style="left: 173px; top: 115px; width: 4px; height: 3px; background: blue;"></div> <div class="ff" style="left: 69px; top: 145px; width: 3px; height: 3px; background: blue;"></div> <div class="ff" style="left: 69px; top: 161px; width: 3px; height: 3px; background: blue;"></div> <div class="ff" style="left: 162px; top: 161px; width: 4px; height: 3px; background: blue;"></div> <div class="ff" style="left: 162px; top: 161px; width: 4px; height: 3px; background: blue;"></div> <div class="ff" style="left: 162px; top: 161px; width: 4px; height: 3px; background: blue;"></div> <div class="ff" style="left: 162px; top: 161px; width: 4px; height: 3px; background: blue;"></div> <div class="ff" style="left: 162px; top: 161px; width: 4px; height: 3px; background: blue;"></div> <div class="ff" style="left: 162px; top: 161px; width: 4px; height: 3px; background: blue;"></div> <div class="ff" style="left: 69px; top: 191px; width: 3px; height: 3px; background: blue;"></div> <div class="ff" style="left: 69px; top: 207px; width: 3px; height: 3px; background: blue;"></div> <div class="ff" style="left: 177px; top: 207px; width: 3px; height: 3px; background: blue;"></div> <div class="ff" style="left: 177px; top: 207px; width: 3px; height: 3px; background: blue;"></div> <div class="ff" style="left: 177px; top: 207px; width: 3px; height: 3px; background: blue;"></div> <div class="ff" style="left: 177px; top: 207px; width: 3px; height: 3px; background: blue;"></div> <div class="ff" style="left: 177px; top: 207px; width: 3px; height: 3px; background: blue;"></div> <div class="ff" style="left: 177px; top: 207px; width: 3px; height: 3px; background: blue;"></div> <div class="ff" style="left: 69px; top: 237px; width: 3px; height: 3px; background: blue;"></div> <div class="ff" style="left: 69px; top: 253px; width: 3px; height: 3px; background: blue;"></div> <div class="ff" style="left: 168px; top: 253px; width: 4px; height: 3px; background: blue;"></div> <div class="ff" style="left: 168px; top: 253px; width: 4px; height: 3px; background: blue;"></div> <div class="ff" style="left: 168px; top: 253px; width: 4px; height: 3px; background: blue;"></div> <div class="ff" style="left: 168px; top: 253px; width: 4px; height: 3px; background: blue;"></div> <div class="ff" style="left: 168px; top: 253px; width: 4px; height: 3px; background: blue;"></div> <div class="ff" style="left: 168px; top: 253px; width: 4px; height: 3px; background: blue;"></div> <div class="ff" style="left: 69px; top: 283px; width: 3px; height: 3px; background: blue;"></div> <div class="ff" style="left: 69px; top: 299px; width: 3px; height: 3px; background: blue;"></div> <div class="ff" style="left: 135px; top: 299px; width: 4px; height: 3px; background: blue;"></div> <div class="ff" style="left: 135px; top: 299px; width: 4px; height: 3px; background: blue;"></div> <div class="ff" style="left: 135px; top: 299px; width: 4px; height: 3px; background: blue;"></div> <div class="ff" style="left: 135px; top: 299px; width: 4px; height: 3px; background: blue;"></div> <div class="ff" style="left: 69px; top: 329px; width: 3px; height: 3px; background: blue;"></div> <div class="ff" style="left: 69px; top: 345px; width: 3px; height: 3px; background: blue;"></div> <div class="ff" style="left: 68px; top: 352px; width: 41px; height: 19px; background: blue;"></div> <div class="ff" style="left: 68px; top: 382px; width: 41px; height: 19px; background: blue;"></div> <div class="ff" style="left: 68px; top: 412px; width: 41px; height: 19px; background: blue;"></div> <div class="ff" style="left: 68px; top: 442px; width: 41px; height: 19px; background: blue;"></div> <div class="ff" style="left: 69px; top: 465px; width: 3px; height: 3px; background: blue;"></div> <ul class="list-author"> <li> Word </li> <li> Word </li> <li> Word </li> <li> Word </li> </ul> </div> <!-- headline headline-left headline-active --> <div class="headline headline-right headline-active"> <!--‎f--><div style="width: 2px; height: 2px; background: white;"></div> </div> <div style="position:relative;"> <div style="height: 4000px; background: red;"> </div> </div> </div> <!-- container-ext --> </body> </html>