relatively-fixed-element/index.html at main · kenwhatts/relatively-fixed-element · GitHub

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
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <script defer src="script.js"></script>
    <title>Fixed Relatively</title>
  </head>
  <body>
    <div class="main-container">
      <ul class="social-icons">
        <li class="blue"></li>
        <li class="red"></li>
        <li class="black"></li>
      </ul>
      <div class="content">
        <h1>About</h1>

        <p>
          As of now 2024, with the CSS position: fixed; the element is
          absolutely positioned to the whole window/document, even though the
          parent has a position: relative; it just wont work. But with this
          javascript solution an element can be <b>relatively fixed</b> to its
          parent.
          <br />
          <br />
          Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sit, animi
          eligendi sint dolore ea ad unde molestias quia eius sequi reiciendis
          voluptatum sed. Soluta eveniet, qui aliquam neque id magnam aliquid
          sed odio cumque ab libero fuga sint autem iure! Modi distinctio itaque
          iste! Similique, quis harum qui eaque a et accusantium? Aperiam
          repellat animi atque officiis voluptatem aliquam ex reiciendis magni
          recusandae nam, nisi sed praesentium soluta illo. Dicta distinctio
          reprehenderit sequi cum quo quibusdam magnam odio, praesentium
          voluptas, ratione quis hic harum itaque consequuntur tempore rerum
          ipsam autem totam, nostrum assumenda ullam! Accusantium tenetur
          quibusdam impedit voluptates mollitia.
        </p>
      </div>
    </div>
    <div class="just-for-scroll">
      <p>
        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Et temporibus
        nemo quo dolores doloribus culpa accusantium voluptas ipsa, aliquam,
        expedita eveniet veritatis impedit quas unde aperiam cumque voluptatum
        quia alias, quae assumenda fugit maxime deserunt adipisci pariatur.
        Exercitationem assumenda, obcaecati nemo unde sit consequuntur at quis
        repudiandae. Ducimus, velit perferendis Lorem ipsum, dolor sit amet
        consectetur adipisicing elit. Distinctio ipsum doloribus perferendis.
        Ad, cum? Voluptatibus veniam tenetur ipsam odio cupiditate molestias ex
        officia corrupti vero sit neque tempora vitae perspiciatis explicabo
        culpa, labore facilis eum voluptates quisquam eaque libero voluptate
        commodi! Veritatis aliquid cumque officiis? Excepturi provident
        voluptatem vitae assumenda laudantium eveniet nemo quisquam delectus
        esse. Repellat magnam eveniet facere doloribus, animi illum odit quia
        voluptatum iste cumque laborum facilis corrupti ipsum necessitatibus
        numquam optio beatae temporibus nisi. Suscipit accusantium ad quis et
        aut tempore amet odio, blanditiis nesciunt eum repudiandae vitae
        consequatur rerum officia dicta nihil quasi. Et, illum!
      </p>
    </div>
  </body>
</html>