htmlapp/indexStickyPosition.html at main · tinagalido/htmlapp · 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
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Mate academy</title>
    <link rel="stylesheet" href="styleStickyPosition.css">
  </head>
  <body id="page-top">
    <div class="scrollTop"><a href="#page-top" class="scrollTop__link">↑</a></div>
    <h1 class="heading">Sticky header</h1>
    <nav class="nav">
      <a href="#section-1" class="nav__link">Section 1</a>
      <a href="#section-2" class="nav__link">Section 2</a>
      <a href="#section-3" class="nav__link">Section 3</a>
      <a href="#section-4" class="nav__link">Section 4</a>
    </nav>
    <main class="main">
      <section class="section" id="section-1">

        <div class="container">
          <div><a href="#page-top">Go to top</a></div>
          Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aspernatur asperiores tempore cum. Laboriosam molestias asperiores praesentium illum dolores! Natus iure aliquid quas dolor laudantium mollitia placeat dolore, eum ex. Saepe.
        </div>
      </section>
      <section class="section section-2" id="section-2">
        <div class="container">
          <div><a href="#page-top">Go to top</a></div>
          Lorem ipsum dolor sit amet consectetur, adipisicing elit. Accusantium voluptas recusandae explicabo, vero nesciunt quae ratione similique mollitia quas molestiae nostrum expedita optio. Odio neque aliquam deleniti sequi, officia ipsam!
        </div>
      </section>
      <section class="section" id="section-3">
        <div class="container">
          <div><a href="#page-top">Go to top</a></div>
          Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sequi accusamus esse facere illum deserunt deleniti tempora unde corporis dolorum rem, natus vel. Aliquam ipsum est doloribus facilis consequatur voluptas consequuntur.
        </div>
      </section>
      <section class="section section-4" id="section-4">
        <div class="container">
          <div><a href="#page-top">Go to top</a></div>
          Lorem, ipsum dolor sit amet consectetur adipisicing elit. Rem earum optio et illo aliquid maiores voluptatibus obcaecati tenetur eum, nihil quos assumenda laborum tempora sit numquam consequuntur eveniet eos voluptatem.
        </div>
      </section>
    </main>

    <footer class="footer">
      Footer Content
    </footer>
  </body>
</html>