Skip to content

Commit

Permalink
Expanded sticky position tests
Browse files Browse the repository at this point in the history
  • Loading branch information
@meyerweb
meyerweb committed Feb 23, 2016
1 parent 3a59f30 commit 13207af
Showing 1 changed file with 75 additions and 2 deletions.
77 changes: 75 additions & 2 deletions position-sticky.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,13 +8,16 @@
.scrollpane {border: 1px solid; height: 10em; width: 20em; overflow: scroll; margin: 1em 0;}
.scrollpane h1 {font-size: 1em; color: black; background: rgba(0,0,0,0.42); margin: 0; padding: 0.25em;}
.scrollpane ol {margin: 0.25em 0;}
.scrollpane h1 {position: sticky; top: 0;}
.scrollpane h1 {position: sticky;}
.scrollpane#d01 {top: 0;}
.scrollpane#d02 h1 {top: -1em;}
.scrollpane#d03 h1 {bottom: 1em;}
.scrollpane#d04 h1 {top: 1em; bottom: 1em;}
</style>
</head>
<body>

<div class="scrollpane">
<div class="scrollpane" id="d01">
<h1>Sticky!</h1>
<ol>
<li></li>
Expand Down Expand Up @@ -84,5 +87,75 @@ <h1>Sticky again!</h1>
</ol>
</div>

<div class="scrollpane" id="d03">
<h1>Sticky!</h1>
<ol>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
<h1>Sticky again!</h1>
<ol>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
</div>

<div class="scrollpane" id="d04">
<h1>Sticky!</h1>
<ol>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
<h1>Sticky again!</h1>
<ol>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
</div>

</body>
</html>

0 comments on commit 13207af

Please sign in to comment.