#one { position: sticky; top: 10px; } 

 
 
HEADER
MAIN CONTENT

 .main-container { max-width: 500px; height: 500px; margin: 0 auto; margin-top: 40px; overflow: auto; } .main-container *+* { margin-top: 20px; } .main-header { height: 50px; } .main-content { min-height: 600px; } .main-header { position: -webkit-sticky; position: sticky; top: 0; } 

 
 
HEADER
MAIN CONTENT

 .main-container *+* { margin-top: 20px; } .main-header { height: 50px; } .main-content { min-height: 600px; } .main-footer { position: -webkit-sticky; position: sticky; bottom: 0; border-color: red; } .devide { height: 600px; } 

 
 
 
 
Scroll Down!
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus suscipit blanditiis delectus quos, soluta fuga voluptatem, facere inventore neque voluptate quaerat unde laboriosam molestiae repellat, sapiente accusamus cumque! Ipsam, illo!
 
Sidebar
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab maxime fugiat perspiciatis.

 .cf:before, .cf:after { content: " "; display: table; clear: both; } .cf { *zoom: 1; } .scroll { height: 500px; overflow: scroll; padding: 0 10px; max-width: 500px; margin: 40px auto; background: #FFFFFF; } .content { padding: 0 15px; width: 280px; } .sidebar { padding: 20px; width: 170px; background: #2D2D2D; color: #FFFFFF; } .content, .sidebar { float: left; } .sidebar { position: -webkit-sticky; position: sticky; top: 15px; } 

 
 
 
 
A
 
Apple
Artichoke
Aardvark
Ant
Acorn
 
D
 
Dog
Date
Danish
Dandelion

 @supports (position: sticky) { .list-header { position: sticky; top: 0; } } .container { width: 500px; height: 500px; margin: 40px auto; position: relative; overflow: auto; } .list { min-height: 1600px; background: #FFFFFF; } .list-content { padding: 10px 20px; } .list-header { padding: 10px; background: #2D2D2D; color: #FFFFFF; position: relative; font-weight: bold; } 

 
 
 
 
 
Name
Age
Job
Color
URL
 
 
Lorem.
Ullam.
Vel.
At.
Quis.
 
Name
Age
Job
Color
URL

 .container { height: 500px; width: fit-content; margin: 40px auto; x  overflow: auto; } table { text-align: left; position: relative; border-collapse: collapse; } th, td { padding: 0.25rem; } tr:nth-child(even) { background: #EFEFEF; } tr.red th { background: #dd4a63; color: white; } tr.green th { background: #03C03C; color: white; } tr.blue th { background: #1580d8; color: white; } th { background: white; position: sticky; top: 0; } 

 
 
Sticky Progress
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem, cumque? A, est perferendis explicabo odit possimus quisquam rem ad tempore ipsa, obcaecati ex culpa similique, aliquam corporis. Quis, nostrum expedita.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem, cumque? A, est perferendis explicabo odit possimus quisquam rem ad tempore ipsa, obcaecati ex culpa similique, aliquam corporis. Quis, nostrum expedita.

 .container { width: 500px; height: 500px; overflow: auto; margin: 40px auto 40px; padding-bottom: 500px; box-sizing: border-box; } .sticky { width: 50px; height: 10px; background: rgba(36, 167, 254, 0.979); position: -webkit-sticky; position: sticky; top: 0; } .sticky:nth-of-type(2) { transform: translateX(50px); } .sticky:nth-of-type(3) { transform: translateX(100px); } .sticky:nth-of-type(4) { // ... .sticky:nth-of-type(10) { transform: translateX(450px); } 

 
 
 
Page Progress Bar Example
 
All images provided at random from Codepen assets. All ipsum text provided by officeipsum.com.
Face time level the playing field highlights. Bake it in quick win bench mark, or paddle on both sides. Re-inventing the wheel. What do you feel you would bring to the table if you were hired for this position drink from the firehose, but quarterly sales are at an all-time low or can you ballpark the cost per unit for me we are running out of runway.
Meeting assassin enough to wash your face so after I ran into Helen at a restaurant, I realized she was just office pretty good optics put a record on and see who dances, yet we're ahead of the curve on that one, or personal development. Bench mark beef up helicopter view highlights take five, punch the tree, and come back in here with a clear head, so translating our vision of having a market leading platfrom nor what's the status on the deliverables for eow?.

 :root { --progress-bar-height: 4px; --progress-bar-color: gainsboro; --progress-bar-value-color: dodgerblue; --progress-bar-value: 20%; } article { position: relative; padding: 24px; width: 100%; max-width: 700px; margin: 60px auto; } .article-title { position: sticky; top: 0; padding-bottom: 24px; } img { width: 100%; margin-bottom: 18px; } .progress-wrapper { position: relative; } .progress-label { position: absolute; right: 0; bottom: 0; font-size: 14px; } progress { -webkit-appearance: none; -moz-appearance: none; appearance: none; position: absolute; width: 100%; height: var(--progress-bar-height); background-color: var(--progress-bar-color); border: none; } progress::-moz-progress-bar { background-color: var(--progress-bar-value-color); } progress::-webkit-progress-bar { background-color: var(--progress-bar-color); } progress::-webkit-progress-value { background-color: var(--progress-bar-value-color); } progress::-ms-fill { background-color: var(--progress-bar-value-color); } 

 $(document).ready(function() { const win = $(window); const doc = $(document); const progressBar = $('progress'); const progressLabel = $('.progress-label'); const setValue = () => win.scrollTop(); const setMax = () => doc.height() - win.height(); const setPercent = () => Math.round(win.scrollTop() / (doc.height() - win.height()) * 100); progressLabel.text(setPercent() + '%'); progressBar.attr({ value: setValue(), max: setMax() }); doc.on('scroll', () => { progressLabel.text(setPercent() + '%'); progressBar.attr({ value: setValue() }); }); win.on('resize', () => { progressLabel.text(setPercent() + '%'); progressBar.attr({ value: setValue(), max: setMax() }); }) }); 

 
 
 
Timeline
 
 
1997
 
 
Lorem ipsum dolor sit amet, consectetur adipiscing elit
Nam non purus vel orci molestie consequat.
 
Etiam et velit in arcu consectetur aliquet et eu metus
Sed vitae diam rhoncus, imperdiet nunc quis, lacinia nulla.
 
Today

 ol.timeline ol, ol.timeline, html, body { margin: 0; padding: 0; } *, *:before, *:after { box-sizing: border-box; } #wrapper { margin: 0 auto; max-width: 64em; } #container { float: left; padding: 1em; width: 100%; } h1, h2 { text-align: center; } ol.timeline， ol.timeline ol { list-style: none; } ol.timeline>li { padding-left: 2px; position: relative; } ol.timeline>li:before { background-color: #a2ed56; content: ""; height: 100%; left: 0; position: absolute; top: 0; width: 2px; } @media only screen and (min-width: 40em) { ol.timeline>li:before { left: 50%; transform: translateX(-50%); } } ol.timeline>li>h2 { background-color: #a2ed56; color: #1d1f20; margin: 0; position: -webkit-sticky; position: sticky; text-transform: uppercase; top: 0; } @media only screen and (min-width: 40em) { ol.timeline>li>h2 { border-radius: 0.25em; margin: 0 auto; margin-bottom: 1em; max-width: 200px; } } ol.timeline>li>ol { display: flex; flex-wrap: wrap; } ol.timeline>li>ol>li { border-top: 2px solid #a2ed56; flex: 0 0 100%; padding: 0 0 0.5em 1em; } @media only screen and (min-width: 40em) { ol.timeline>li>ol>li { flex-basis: 50%; } ol.timeline>li>ol>li:nth-child(odd) { padding-left: 0; padding-right: 1em; } ol.timeline>li>ol>li:nth-child(even) { margin-top: 2em; padding-right: 0; } } ol.timeline>li>ol>li>h3:first-child { color: #a2ed56; margin-bottom: -0.75em; } ol.timeline>li:nth-child(6n+2):before, ol.timeline>li:nth-child(6n+2)>h2 { background-color: #83e4e2; } ol.timeline>li:nth-child(6n+2)>ol>li { border-color: #83e4e2; } ol.timeline>li:nth-child(6n+2)>ol>li h3 { color: #83e4e2; } ol.timeline>li:nth-child(6n+3):before, ol.timeline>li:nth-child(6n+3)>h2 { background-color: #fd6470; } ol.timeline>li:nth-child(6n+3)>ol>li { border-color: #fd6470; } ol.timeline>li:nth-child(6n+3)>ol>li h3 { color: #fd6470; } ol.timeline>li:nth-child(6n+4):before, ol.timeline>li:nth-child(6n+4)>h2 { background-color: #fca858; } ol.timeline>li:nth-child(6n+4)>ol>li { border-color: #fca858; } ol.timeline>li:nth-child(6n+4)>ol>li h3 { color: #fca858; } ol.timeline>li:nth-child(6n+5):before, ol.timeline>li:nth-child(6n+5)>h2 { background-color: #fddc32; } ol.timeline>li:nth-child(6n+5)>ol>li { border-color: #fddc32; } ol.timeline>li:nth-child(6n+5)>ol>li h3 { color: #fddc32; } ol.timeline>li:nth-child(6n+6):before, ol.timeline>li:nth-child(6n+6)>h2 { background-color: #fafafa; } ol.timeline>li:nth-child(6n+6)>ol>li { border-color: #fafafa; } ol.timeline>li:nth-child(6n+6)>ol>li h3 { color: #fafafa; } 

 
A scroll (from the Old French escroe or escroue), also known as a roll, is a roll of papyrus, parchment, or paper containing writing.
Structure
A scroll is usually divided up into pages, which are sometimes separate sheets of papyrus or parchment glued together at the edges, or may be marked divisions of a continuous roll of writing material. The scroll is usually unrolled so that one page is exposed at a time, for writing or reading, with the remaining pages rolled up to the left and right of the visible page. It is unrolled from side to side, and the text is written in lines from the top to the bottom of the page. Depending on the language, the letters may be written left to right, right to left, or alternating in direction (boustrophedon).
Some scrolls are simply rolled up pages; others may have wooden rollers on each end: Torah scrolls have rather elaborate rollers befitting their ceremonial function.
History of scroll use
Scrolls were the first form of editable record keeping texts, used in Eastern Mediterranean ancient Egyptian civilizations. Parchment scrolls were used by the Israelites among others before the codex or bound book with parchment pages was invented by the Romans, which became popular around the 1st century AD. Scrolls were more highly regarded than codices until well into Roman times, where they were usually written in single latitudinal column.
The ink used in writing scrolls had to adhere to a surface that was rolled and unrolled, so special inks were developed. Even so, ink would slowly flake off of scrolls.
Rolls
Rolls recording UK Acts of Parliament held in the Parliamentary Archives, Palace of Westminster, London

 html { margin: 0 auto; overflow: auto; position: relative; text-align: justify; font-size: 32px; background: #FDFC47; background: -webkit-linear-gradient(to right, #24FE41, #FDFC47); background: linear-gradient(to right, #24FE41, #FDFC47); } body { max-width: 500px; height: 500px; overflow: auto; color: #2D2D2D; margin: 40px auto; background: #FFFFFF; } body::after, *::before, span { position: sticky; top: 0em; bottom: 0em; white-space: nowrap; } p, h2, div { display: inline; font-size: 1rem; } h2::before { content: "§ "; } p::before { content: "¶ "; } h2 { color: rgba(255, 100, 100, 1); } b, i { color: rgba(255, 100, 100, 0.7); } 

 [].forEach.call(document.querySelectorAll("p,li,h2,a"), function (el) { el.innerHTML = el.innerHTML .split(" ") .map(word => `${word}`) .join(" "); }); // 自动触发滚动 function autoscroll() { document.scrollingElement.scrollBy({ top: 10, behavior: "smooth" }); } var INTRVL = setInterval(autoscroll, 100); function stop() { clearInterval(INTRVL); } document.documentElement.addEventListener("mousemove", stop); 

 .container { width: 470px; margin: 40px auto; background: #FFFFFF; height: 450px; overflow: auto; } svg { position: -webkit-sticky; position: sticky; top: 0; } path { fill: none; stroke: #2D2D2D; stroke-width: 1.5px; }