-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
76 lines (74 loc) · 10.2 KB
/
index.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Compare sticky sidebar behaviours</title>
<link rel="stylesheet" href="var.css">
<link rel="stylesheet" href="utility.css">
<link rel="stylesheet" href="layout.css">
<link rel="stylesheet" href="sidebar.css">
</head>
<body>
<header>
<nav class="inside">
<ul>
<li>Select sidebar sticky behaviour:</li>
<li><a href="#" data-sticky-behaviour="none">not sticky</a></li>
<li><a href="#" data-sticky-behaviour="default">default sticky</a></li>
<li><a href="#" data-sticky-behaviour="bottom">sticky after scroll</a></li>
</ul>
</nav>
</header>
<main class="inside">
<section class="content">
<h1>Lorem ipsum?</h1>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nulla ipsum aliquid vel iste velit aperiam animi maxime pariatur voluptatem natus, unde enim quia, architecto exercitationem totam, soluta suscipit quidem recusandae?</p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ipsum exercitationem dolorem perspiciatis illum velit dolores porro dolor, veniam quo possimus dolore harum? Excepturi, exercitationem labore. Praesentium ab nemo corporis vitae laudantium quam quis quod quas reprehenderit repudiandae, autem dolore natus odio fuga totam. Eum voluptates quaerat magnam accusamus quas voluptatibus dignissimos maiores soluta cumque libero quos maxime officiis deleniti qui voluptas, laudantium totam nulla expedita. Provident fuga quasi tempore ipsum odit necessitatibus. Illo mollitia adipisci impedit! Ipsa voluptatum temporibus eveniet itaque vel blanditiis, modi distinctio ab atque ratione animi deleniti hic corporis quam error omnis voluptatem quia tempora. Veritatis, quibusdam.</p>
<h2>Lorem ipsum dolor sit amet consectetur adipisicing elit!</h2>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ad rerum animi minima, quisquam rem voluptatum cupiditate ab delectus autem eveniet sit. Expedita voluptatibus iste, amet deserunt velit ipsum illum similique. Neque mollitia eum rem modi voluptates molestias tempora quos odit est quasi. Suscipit voluptatibus iure quaerat amet consequatur nesciunt repellat, non commodi sequi deleniti mollitia labore eius quasi. Iste autem rem magnam quibusdam suscipit consequatur totam vitae quidem consequuntur distinctio. Officia magni odit blanditiis numquam, impedit repudiandae asperiores? Consequatur culpa in quod quia ex officia pariatur nostrum velit nihil odio similique atque itaque sed, expedita maiores adipisci soluta ratione impedit voluptatem, at corporis veniam distinctio vero! Nam dicta, maxime inventore aliquid incidunt quibusdam tenetur minus saepe, beatae unde rerum libero ipsa odit eum quaerat doloremque pariatur, blanditiis ut atque voluptatem repellendus nobis. Ipsam deleniti omnis mollitia expedita quidem, enim ab quisquam illo nisi rerum, voluptatibus deserunt consectetur cum, dolor ipsa excepturi iste animi error repudiandae officia. Minus dicta magni ab accusamus ut, perspiciatis sequi mollitia, molestias alias obcaecati animi. Blanditiis qui explicabo pariatur quod doloremque voluptate deserunt laboriosam non magni eius aperiam sit illo distinctio dolore molestias doloribus hic quidem dolor rem debitis vel nemo, inventore nam. Ad, necessitatibus ipsum?</p>
<h2>Ad rerum animi minima …</h2>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ad rerum animi minima, quisquam rem voluptatum cupiditate ab delectus autem eveniet sit. Expedita voluptatibus iste, amet deserunt velit ipsum illum similique. Neque mollitia eum rem modi voluptates molestias tempora quos odit est quasi. Suscipit voluptatibus iure quaerat amet consequatur nesciunt repellat, non commodi sequi deleniti mollitia labore eius quasi. Iste autem rem magnam quibusdam suscipit consequatur totam vitae quidem consequuntur distinctio. Officia magni odit blanditiis numquam, impedit repudiandae asperiores? Consequatur culpa in quod quia ex officia pariatur nostrum velit nihil odio similique atque itaque sed, expedita maiores adipisci soluta ratione impedit voluptatem, at corporis veniam distinctio vero! Nam dicta, maxime inventore aliquid incidunt quibusdam tenetur minus saepe, beatae unde rerum libero ipsa odit eum quaerat doloremque pariatur, blanditiis ut atque voluptatem repellendus nobis. Ipsam deleniti omnis mollitia expedita quidem, enim ab quisquam illo nisi rerum, voluptatibus deserunt consectetur cum, dolor ipsa excepturi iste animi error repudiandae officia. Minus dicta magni ab accusamus ut, perspiciatis sequi mollitia, molestias alias obcaecati animi. Blanditiis qui explicabo pariatur quod doloremque voluptate deserunt laboriosam non magni eius aperiam sit illo distinctio dolore molestias doloribus hic quidem dolor rem debitis vel nemo, inventore nam. Ad, necessitatibus ipsum?</p>
<h2>Ad, necessitatibus ipsum?</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque quasi cupiditate, reiciendis accusantium rem magni minus corrupti et. Rem, libero eveniet facilis adipisci vel ut odio sequi nihil ex, consectetur voluptatem ad sit, omnis velit et tempore laudantium ea! Fugiat, amet necessitatibus pariatur, quae neque error sed nostrum ut quas natus debitis numquam quidem suscipit placeat. Harum vel ex repudiandae iusto, nostrum libero voluptatum hic saepe, labore, corporis amet consectetur rerum? Odio harum dolor inventore quae molestiae non, dignissimos laudantium iure doloribus necessitatibus vero perferendis soluta temporibus neque maxime, totam, labore autem amet explicabo. Exercitationem voluptatem error quos accusantium, repellendus modi neque ullam nulla assumenda reprehenderit? Accusamus ea ab, dicta tenetur odio doloremque quod fuga in libero quas, laudantium animi quasi expedita maxime facere ipsum cumque distinctio! Fugiat dolores blanditiis obcaecati sunt quis, officiis reiciendis sapiente, ipsa fuga maiores accusantium harum dolorem ea eius esse minus iusto odit necessitatibus! Sint nisi aperiam quas illum blanditiis, quos, architecto esse recusandae vitae quis, praesentium molestiae voluptates? Quam possimus ducimus non molestiae minima, nesciunt vitae quasi esse dolores amet commodi hic cumque! Vero, libero quos sapiente iure animi est maiores necessitatibus ad dolorum officia iste voluptas quis, error reprehenderit? Iusto vero laudantium eligendi ut maxime nostrum quos quibusdam perferendis debitis, odio velit accusantium aut reiciendis impedit voluptatem alias veritatis animi. Porro rem quam nulla error dolorum, explicabo temporibus cum nisi provident omnis qui exercitationem voluptatem eligendi consequuntur repellendus praesentium ab voluptates sequi perferendis cumque ipsa, minus voluptas possimus? Cum labore tenetur at, id ipsam quos dolor commodi aliquam numquam totam sed soluta recusandae fugiat voluptates natus vitae dolore maxime facere cumque corporis deleniti exercitationem, eos itaque quae! Suscipit esse dolore dolorem aut mollitia! Excepturi velit praesentium sunt vel optio eaque repudiandae consequatur saepe? Consequuntur labore aut assumenda sequi quidem error voluptatibus perspiciatis, fuga totam ut reprehenderit. Iste omnis consequuntur provident voluptatum quae eum alias ratione, maxime explicabo atque officiis voluptatibus, deserunt ea, dolorem modi sunt. Voluptates quisquam, minus expedita eos esse doloremque omnis sapiente nisi enim aperiam iusto vel quas necessitatibus iure maxime recusandae, nostrum tenetur quasi ratione unde soluta? Est nulla quaerat odio officia. Soluta facilis incidunt cum minus quaerat commodi dolorem, quae laudantium! Placeat eius est qui beatae rerum sed maiores molestiae, dolorem ipsa adipisci! Quidem praesentium odit explicabo ducimus, vero velit quasi, voluptatem minus eius sequi alias at pariatur esse ullam quaerat minima, culpa delectus maiores est quos ipsam ut.</p>
</section>
<aside class="sidebar">
<details open>
<summary>Expand Sidebar</summary>
<h2>News</h2>
<article class="news-card">
<h3>Lorem ipsum dolor sit amet</h3>
<small>Nulla ipsum aliquid vel iste velit aperiam animi maxime pariatur voluptatem natus… <a href="//tim-greller.de">(Weiterlesen)</a></small>
</article>
<article class="news-card">
<h3>Lorem ipsum dolor sit amet</h3>
<small>Nulla ipsum aliquid vel iste velit aperiam animi maxime pariatur voluptatem natus… <a href="//tim-greller.de">(Weiterlesen)</a></small>
</article>
<article class="news-card">
<h3>Lorem ipsum dolor sit amet</h3>
<small>Nulla ipsum aliquid vel iste velit aperiam animi maxime pariatur voluptatem natus… <a href="//tim-greller.de">(Weiterlesen)</a></small>
</article>
<article class="news-card">
<h3>Lorem ipsum dolor sit amet</h3>
<small>Nulla ipsum aliquid vel iste velit aperiam animi maxime pariatur voluptatem natus… <a href="//tim-greller.de">(Weiterlesen)</a></small>
</article>
</details>
<hr>
<h2>Links</h2>
<ul>
<li><a href="//tim-greller.de">Lorem ipsum dolor sit amet</a></li>
<li><a href="//tim-greller.de">Lorem ipsum dolor sit amet</a></li>
<li><a href="//tim-greller.de">Lorem ipsum dolor sit amet</a></li>
<li><a href="//tim-greller.de">Lorem ipsum dolor sit amet</a></li>
<li><a href="//tim-greller.de">Lorem ipsum dolor sit amet</a></li>
</ul>
<hr>
<p>© 2022 Sidebar Demo</p>
<small>Lorem ipsum dolor sit amet consectetur adipisicing elit. A consectetur facere quam? Facilis, obcaecati voluptatum sequi vitae minima ipsam commodi?</small>
</aside>
</main>
<footer>
<script src="switch-demo-mode.js" defer></script>
</footer>
</body>
</html>