inline-4-ref.html (1056B)
1 <!DOCTYPE html> 2 <!-- Any copyright is dedicated to the Public Domain. 3 - http://creativecommons.org/publicdomain/zero/1.0/ --> 4 <html> 5 <head> 6 <link rel="author" title="Corey Ford" href="mailto:corey@coreyford.name"> 7 <link rel="stylesheet" type="text/css" href="ahem.css"> 8 <style> 9 #scroller { 10 margin-top: 100px; 11 height: 200px; 12 width: 500px; 13 overflow: hidden; 14 } 15 #container { 16 background: pink; 17 position: relative; 18 margin: 50px; 19 height: 400px; 20 margin-bottom: 1000px; 21 } 22 #sticky { 23 position: sticky; 24 left: 0px; 25 top: 75px; 26 outline: 1px dotted purple; 27 font: 10px/1 Ahem; 28 } 29 </style> 30 </head> 31 <body> 32 <div id="scroller"> 33 <div id="container"> 34 <span id="sticky"> 35 First line<br> 36 Second line<br> 37 Third line<br> 38 </span> 39 </div> 40 </div> 41 <script> 42 document.getElementById("scroller").scrollTop = 30; 43 </script> 44 </body> 45 </html>