stefan22
11/19/2017 - 6:35 AM

sticky position as the document loads, the div seems to have static positioning, then as you scroll turns into real fixed positioning

sticky position as the document loads, the div seems to have static positioning, then as you scroll turns into real fixed positioning

stickyPositioning.html
content_copyfile_download
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Chapter 3: sticky positioning</title>
    <link rel="stylesheet" href="../assets/css/common.css">
    <link href="https://fonts.googleapis.com/css?family=Open+Sans|Roboto+Slab" rel="stylesheet">
    <style>
        .box {
            width: 200px;
            top: 20px;
            position: sticky;
            border: 1px solid #d0bfff;
            border-radius: 5px;
            background-color: #e5dbff;
            padding: 10px;
            margin: 0 0 2em 0;
        }
    </style>
</head>

<body id="ch1">
    <header class="example-header">
        <ul class="meta">
            <li class="book">The New CSS Layout</li>
            <li class="author">Rachel Andrew</li>
            <li class="chapter">Chapter 3</li>
            <li class="index"><a href="../">Index of examples</a></li>
        </ul>
        <div class="inner">
            <h1>Position: sticky</h1>
        </div>
    </header>
    <div class="example">

        <div class="container">
            <div class="box">
                <p>I am a sticky position box. I will display in my static position, but when the document scrolls and I reach 20 pixels from the top of the viewport, I become stuck to that location.</p>
            </div>

             <p>One of the first questions the visitor to an aerodrome, when watching the altitude tests, asks is: "How is it known that the airman has risen to a height of so many feet?" Does he guess at the distance he is above the earth?</p>
        <p>If this were so, then it is very evident that there would be great difficulty in awarding a prize to a number of competitors each trying to ascend higher than his rivals.</p>
        <p>No; the pilot does not guess at his flying height, but he finds it by a height-recording instrument called the BAROGRAPH. In the last chapter we saw how the ordinary mercurial barometer can be used to ascertain fairly accurately the height of mountains. But the airman does not take a mercurial barometer up with him. There is for his use another form of barometer much more suited to his purpose, namely, the barograph, which is really a development of the aneroid barometer.</p>
        <p>The aneroid barometer (Gr. a, not; neros, moist) is so called because it requires neither mercury, glycerine, water, nor any other liquid in its construction. It consists essentially of a small, flat, metallic box made of elastic metal, and from which the air has been partially exhausted. In the interior there is an ingenious arrangement of springs and levers, which respond to atmospheric pressure, and the depression or elevation of the surface is registered by an index on the dial. As the pressure of the atmosphere increases, the sides of the box are squeezed in by the weight of the air, while with a decrease of pressure they are pressed out again by the springs. By means of a suitable adjustment the pointer on the dial responds to these movements. It is moved in one direction for increase of air pressure, and in the opposite for decreased pressure. The positions of the figures on the dial are originally obtained by numerous comparisons with a standard mercurial barometer, and the scale is graduated to correspond with the mercurial barometer.</p>
        <p>From the illustration here given you will notice the pointer and scale of the "A. G" aero-barograph, which is used by many of our leading airmen, and which, as we have said, is a development of the aneroid barometer. The need of a self-registering scale to a pilot who is competing in an altitude test, or who is trying to establish a height record, is self-evident. He need not interfere with the instrument in the slightest; it records and tells its own story. There is in use a pocket barograph which weighs only 1 pound, and registers up to 4000 feet.</p>
        <p>It is claimed for the "A. G." barograph that it is the most precise instrument of its kind. Its advantages are that it is quite portable—it measures only 6 1/4 inches in length, 3 1/2 inches in width, and 2 1/2 inches in depth, with a total weight of only 14 pounds—and that it is exceptionally accurate and strong. Some idea of the labour involved in its construction may be gathered from the fact that this small and insignificant-looking instrument, fitted in its aluminium case, costs over L8.</p>
        </div>

      
     
    </div>
</body>
</html>