public
Last active

postion:sticky with sticky container taller than viewport

  • Download Gist
sticky.html
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
body {
font: 14px Helvetica;
}
.wrapper {
position: absolute;
margin-top: 10px;
}
.sidebar {
float: left;
width: 300px;
top: 0;
position: -webkit-sticky;
}
.main {
float: right;
width: 480px;
margin-left: 50px;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="sidebar">
<ol>
<li>About the CSS 2.1 Specification
<ol>
<li>CSS 2.1 vs CSS 2</li>
<li>Reading the specification</li>
<li>How the specification is organized</li>
<li>Conventions</li>
<li>Acknowledgments</li>
</ol>
</li>
<li>Introduction to CSS 2.1
<ol>
<li>A brief CSS 2.1 tutorial for HTML</li>
<li>A brief CSS 2.1 tutorial for XML</li>
<li>The CSS 2.1 processing model</li>
<li>CSS design principles</li>
</ol>
</li>
<li>Conformance: Requirements and Recommendations
<ol>
<li>Definitions</li>
<li>UA Conformance</li>
<li>Error conditions</li>
<li>The text/css content type</li>
</ol>
</li>
<li>Syntax and basic data types
<ol>
<li>Syntax</li>
<li>Rules for handling parsing errors</li>
<li>Values</li>
<li>CSS style sheet representation</li>
</ol>
</li>
<li>Selectors
<ol>
<li>Pattern matching</li>
<li>Selector syntax</li>
<li>Universal selector</li>
<li>Type selectors</li>
<li>Descendant selectors</li>
<li>Child selectors</li>
<li>Adjacent sibling selectors</li>
<li>Attribute selectors</li>
<li>ID selectors</li>
<li>Pseudo-elements and pseudo-classes</li>
<li>Pseudo-classes</li>
<li>Pseudo-elements</li>
</ol>
</li>
<li>Assigning property values, Cascading, and Inheritance</li>
<li>Media types</li>
<li>Box model</li>
<li>Visual formatting model</li>
<li>Visual formatting model details</li>
<li>Visual effects</li>
<li>Generated content, automatic numbering, and lists</li>
<li>Paged media</li>
<li>Colors and Backgrounds</li>
<li>Fonts</li>
<li>Text</li>
<li>Tables</li>
<li>User interface</li>
</ol>
</div>
 
<div class="main">
<h1>About the CSS 2.1 Specification</h1>
 
<h2>1.1 CSS 2.1 vs CSS 2</h2>
<p>The CSS community has gained significant experience with the CSS2 specification since it became a recommendation in 1998. Errors in the CSS2 specification have subsequently been corrected via the publication of various errata, but there has not yet been an opportunity for the specification to be changed based on experience gained.
<p>While many of these issues will be addressed by the upcoming CSS3 specifications, the current state of affairs hinders the implementation and interoperability of CSS2. The CSS 2.1 specification attempts to address this situation by:
<ul>
<li>Maintaining compatibility with those portions of CSS2 that are widely accepted and implemented.
<li>Incorporating all published CSS2 errata.
<li>Where implementations overwhelmingly differ from the CSS2 specification, modifying the specification to be in accordance with generally accepted practice.
<li>Removing CSS2 features which, by virtue of not having been implemented, have been rejected by the CSS community. CSS 2.1 aims to reflect what CSS features are reasonably widely implemented for HTML and XML languages in general (rather than <em>only</em> for a particular XML language, or <em>only</em> for HTML).
<li>Removing CSS2 features that will be obsoleted by CSS3, thus encouraging adoption of the proposed CSS3 features in their place.
<li>Adding a (very) small number of <a href="#">new property values,</a> when implementation experience has shown that they are needed for implementing CSS2.
</ul>
<p>Thus, while it is not the case that a CSS2 style sheet is necessarily forwards-compatible with CSS 2.1, it is the case that a style sheet restricting itself to CSS 2.1 features is more likely to find a compliant user agent today and to preserve forwards compatibility in the future. While breaking forward compatibility is not desirable, we believe the advantages to the revisions in CSS 2.1 are worthwhile.
<p>CSS 2.1 is derived from and is intended to replace CSS2. Some parts of CSS2 are unchanged in CSS 2.1, some parts have been altered, and some parts removed. The removed portions may be used in a future CSS3 specification. Future specs should refer to CSS 2.1 (unless they need features from CSS2 which have been dropped in CSS 2.1, and then they should only reference CSS2 for those features, or preferably reference such feature(s) in the respective CSS3 Module that includes those feature(s)).
 
<h2>1.2 Reading the specification</h2>
<p>This section is non-normative.
<p>This specification has been written with two types of readers in mind: CSS authors and CSS implementors. We hope the specification will provide authors with the tools they need to write efficient, attractive, and accessible documents, without overexposing them to CSS's implementation details. Implementors, however, should find all they need to build <a href="#">conforming user agents</a>.
<p>The specification begins with a general presentation of CSS and becomes more and more technical and specific towards the end. For quick access to information, a general table of contents, specific tables of contents at the beginning of each section, and an index provide easy navigation, in both the electronic and printed versions.
<p>The specification has been written with two modes of presentation in mind: electronic and printed. Although the two presentations will no doubt be similar, readers will find some differences. For example, links will not work in the printed version (obviously), and page numbers will not appear in the electronic version. In case of a discrepancy, the electronic version is considered the authoritative version of the document.
 
<h2>1.3 How the specification is organized</h2>
<p>This section is non-normative.
<p>The specification is organized into the following sections:
<dl>
<dt><strong>Section 2: An introduction to CSS 2.1</strong>
<dd>The introduction includes a brief tutorial on CSS 2.1 and a discussion of design principles behind CSS 2.1.
<dt><strong>Sections 3 - 18: CSS 2.1 reference manual.</strong>
<dd>The bulk of the reference manual consists of the CSS 2.1 language reference. This reference defines what may go into a CSS 2.1 style sheet (syntax, properties, property values) and how user agents must interpret these style sheets in order to claim <a href="#">conformance</a>.
</dl>
</div>
</div>
</body>
</html>

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.