Skip to content
Advertisements

CSS Position:sticky

CODEPEN:

CSS Position:sticky

HTML CODE:

<!DOCTYPE html>

<html>
<head>
    <meta charset="utf-8" />
    <title>page</title>
    <link rel="stylesheet" type="text/css" href="1.page.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
</head>
<body>

    <div class='container'>
        <h2>First Heading</h2>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id aliquet odio. Maecenas imperdiet eget est malesuada suscipit. Praesent convallis aliquet molestie. Aenean pellentesque nunc quis nibh semper, quis dictum massa blandit. Nam gravida in est et pharetra. Nullam nisi quam, mollis eget ullamcorper at, iaculis laoreet dolor. Morbi cursus eget diam ac condimentum. Donec ut tortor in eros aliquam mattis ut maximus urna. Nullam semper nibh vel nunc commodo euismod.
        </p>
        <p>
            Praesent arcu leo, vulputate sit amet finibus id, fermentum ac tellus. Integer mattis magna ante, non laoreet orci vulputate ut. Fusce lobortis felis quis suscipit efficitur. Morbi efficitur tincidunt orci, et elementum orci fermentum tempus. Nulla non consectetur mi. Maecenas sapien nibh, mollis eget urna at, eleifend rhoncus ligula. Integer nec vestibulum tortor. Integer porttitor scelerisque quam.
        </p>
        <p>
            Aenean nec elit viverra, cursus lorem quis, posuere nulla. Sed ultrices, ex at interdum tristique, libero arcu sodales nunc, ac dapibus ante ipsum sed lorem. Suspendisse sit amet lorem blandit, accumsan turpis at, gravida ligula. In in felis in odio condimentum egestas. Mauris mollis ultricies finibus. Ut diam nisi, porta eget interdum id, fringilla vel orci. Suspendisse porta, massa non tincidunt maximus, quam elit tincidunt mauris, sit amet dignissim magna ipsum vitae orci.
        </p>
        <h2>Second Heading</h2>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id aliquet odio. Maecenas imperdiet eget est malesuada suscipit. Praesent convallis aliquet molestie. Aenean pellentesque nunc quis nibh semper, quis dictum massa blandit. Nam gravida in est et pharetra. Nullam nisi quam, mollis eget ullamcorper at, iaculis laoreet dolor. Morbi cursus eget diam ac condimentum. Donec ut tortor in eros aliquam mattis ut maximus urna. Nullam semper nibh vel nunc commodo euismod.
        </p>
        <p>
            Praesent arcu leo, vulputate sit amet finibus id, fermentum ac tellus. Integer mattis magna ante, non laoreet orci vulputate ut. Fusce lobortis felis quis suscipit efficitur. Morbi efficitur tincidunt orci, et elementum orci fermentum tempus. Nulla non consectetur mi. Maecenas sapien nibh, mollis eget urna at, eleifend rhoncus ligula. Integer nec vestibulum tortor. Integer porttitor scelerisque quam.
        </p>
        <p>
            Aenean nec elit viverra, cursus lorem quis, posuere nulla. Sed ultrices, ex at interdum tristique, libero arcu sodales nunc, ac dapibus ante ipsum sed lorem. Suspendisse sit amet lorem blandit, accumsan turpis at, gravida ligula. In in felis in odio condimentum egestas. Mauris mollis ultricies finibus. Ut diam nisi, porta eget interdum id, fringilla vel orci. Suspendisse porta, massa non tincidunt maximus, quam elit tincidunt mauris, sit amet dignissim magna ipsum vitae orci.
        </p>
        <h2>Third Heading</h2>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id aliquet odio. Maecenas imperdiet eget est malesuada suscipit. Praesent convallis aliquet molestie. Aenean pellentesque nunc quis nibh semper, quis dictum massa blandit. Nam gravida in est et pharetra. Nullam nisi quam, mollis eget ullamcorper at, iaculis laoreet dolor. Morbi cursus eget diam ac condimentum. Donec ut tortor in eros aliquam mattis ut maximus urna. Nullam semper nibh vel nunc commodo euismod.
        </p>
        <p>
            Praesent arcu leo, vulputate sit amet finibus id, fermentum ac tellus. Integer mattis magna ante, non laoreet orci vulputate ut. Fusce lobortis felis quis suscipit efficitur. Morbi efficitur tincidunt orci, et elementum orci fermentum tempus. Nulla non consectetur mi. Maecenas sapien nibh, mollis eget urna at, eleifend rhoncus ligula. Integer nec vestibulum tortor. Integer porttitor scelerisque quam.
        </p>
        <p>
            Aenean nec elit viverra, cursus lorem quis, posuere nulla. Sed ultrices, ex at interdum tristique, libero arcu sodales nunc, ac dapibus ante ipsum sed lorem. Suspendisse sit amet lorem blandit, accumsan turpis at, gravida ligula. In in felis in odio condimentum egestas. Mauris mollis ultricies finibus. Ut diam nisi, porta eget interdum id, fringilla vel orci. Suspendisse porta, massa non tincidunt maximus, quam elit tincidunt mauris, sit amet dignissim magna ipsum vitae orci.
        </p>
    </div>


</body>
</html>

CSS CODE:

body {
    margin: 0;
    font-size: 18px;
    font-family: sans-serif;
}

.container {
    width: 50%;
    margin: 0 auto;
}

h2 {
    position: sticky;
    top: 0;
    background: white;
    padding: 1rem 0;
    font-size: 2rem;
}
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: