209 lines
10 KiB
HTML
209 lines
10 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<title>Webpack App</title>
|
|
<script defer src="main.js"></script></head>
|
|
<body>
|
|
<mwc-top-app-bar-fixed prominent>
|
|
<div slot="title">Title</div>
|
|
</mwc-top-app-bar-fixed>
|
|
|
|
<div>
|
|
<main>
|
|
<article>
|
|
<p>
|
|
The standard Lorem Ipsum passage, used since the 1500s
|
|
"Lorem ipsum dolor sit amet, consectetur adipiscing
|
|
elit, sed do eiusmod tempor incididunt ut labore et
|
|
dolore magna aliqua. Ut enim ad minim veniam, quis
|
|
nostrud exercitation ullamco laboris nisi ut aliquip ex
|
|
ea commodo consequat. Duis aute irure dolor in
|
|
reprehenderit in voluptate velit esse cillum dolore eu
|
|
fugiat nulla pariatur. Excepteur sint occaecat cupidatat
|
|
non proident, sunt in culpa qui officia deserunt mollit
|
|
anim id est laborum." Section 1.10.32 of "de Finibus
|
|
Bonorum et Malorum", written by Cicero in 45 BC "Sed ut
|
|
perspiciatis unde omnis iste natus error sit voluptatem
|
|
accusantium doloremque laudantium, totam rem aperiam,
|
|
eaque ipsa quae ab illo inventore veritatis et quasi
|
|
architecto beatae vitae dicta sunt explicabo. Nemo enim
|
|
ipsam voluptatem quia voluptas sit aspernatur aut odit
|
|
aut fugit, sed quia consequuntur magni dolores eos qui
|
|
ratione voluptatem sequi nesciunt. Neque porro quisquam
|
|
est, qui dolorem ipsum quia dolor sit amet, consectetur,
|
|
adipisci velit, sed quia non numquam eius modi tempora
|
|
incidunt ut labore et dolore magnam aliquam quaerat
|
|
voluptatem. Ut enim ad minima veniam, quis nostrum
|
|
exercitationem ullam corporis suscipit laboriosam, nisi
|
|
ut aliquid ex ea commodi consequatur? Quis autem vel eum
|
|
iure reprehenderit qui in ea voluptate velit esse quam
|
|
nihil molestiae consequatur, vel illum qui dolorem eum
|
|
fugiat quo voluptas nulla pariatur?"
|
|
</p>
|
|
<p>
|
|
The standard Lorem Ipsum passage, used since the 1500s
|
|
"Lorem ipsum dolor sit amet, consectetur adipiscing
|
|
elit, sed do eiusmod tempor incididunt ut labore et
|
|
dolore magna aliqua. Ut enim ad minim veniam, quis
|
|
nostrud exercitation ullamco laboris nisi ut aliquip ex
|
|
ea commodo consequat. Duis aute irure dolor in
|
|
reprehenderit in voluptate velit esse cillum dolore eu
|
|
fugiat nulla pariatur. Excepteur sint occaecat cupidatat
|
|
non proident, sunt in culpa qui officia deserunt mollit
|
|
anim id est laborum." Section 1.10.32 of "de Finibus
|
|
Bonorum et Malorum", written by Cicero in 45 BC "Sed ut
|
|
perspiciatis unde omnis iste natus error sit voluptatem
|
|
accusantium doloremque laudantium, totam rem aperiam,
|
|
eaque ipsa quae ab illo inventore veritatis et quasi
|
|
architecto beatae vitae dicta sunt explicabo. Nemo enim
|
|
ipsam voluptatem quia voluptas sit aspernatur aut odit
|
|
aut fugit, sed quia consequuntur magni dolores eos qui
|
|
ratione voluptatem sequi nesciunt. Neque porro quisquam
|
|
est, qui dolorem ipsum quia dolor sit amet, consectetur,
|
|
adipisci velit, sed quia non numquam eius modi tempora
|
|
incidunt ut labore et dolore magnam aliquam quaerat
|
|
voluptatem. Ut enim ad minima veniam, quis nostrum
|
|
exercitationem ullam corporis suscipit laboriosam, nisi
|
|
ut aliquid ex ea commodi consequatur? Quis autem vel eum
|
|
iure reprehenderit qui in ea voluptate velit esse quam
|
|
nihil molestiae consequatur, vel illum qui dolorem eum
|
|
fugiat quo voluptas nulla pariatur?"
|
|
</p>
|
|
<p>
|
|
The standard Lorem Ipsum passage, used since the 1500s
|
|
"Lorem ipsum dolor sit amet, consectetur adipiscing
|
|
elit, sed do eiusmod tempor incididunt ut labore et
|
|
dolore magna aliqua. Ut enim ad minim veniam, quis
|
|
nostrud exercitation ullamco laboris nisi ut aliquip ex
|
|
ea commodo consequat. Duis aute irure dolor in
|
|
reprehenderit in voluptate velit esse cillum dolore eu
|
|
fugiat nulla pariatur. Excepteur sint occaecat cupidatat
|
|
non proident, sunt in culpa qui officia deserunt mollit
|
|
anim id est laborum." Section 1.10.32 of "de Finibus
|
|
Bonorum et Malorum", written by Cicero in 45 BC "Sed ut
|
|
perspiciatis unde omnis iste natus error sit voluptatem
|
|
accusantium doloremque laudantium, totam rem aperiam,
|
|
eaque ipsa quae ab illo inventore veritatis et quasi
|
|
architecto beatae vitae dicta sunt explicabo. Nemo enim
|
|
ipsam voluptatem quia voluptas sit aspernatur aut odit
|
|
aut fugit, sed quia consequuntur magni dolores eos qui
|
|
ratione voluptatem sequi nesciunt. Neque porro quisquam
|
|
est, qui dolorem ipsum quia dolor sit amet, consectetur,
|
|
adipisci velit, sed quia non numquam eius modi tempora
|
|
incidunt ut labore et dolore magnam aliquam quaerat
|
|
voluptatem. Ut enim ad minima veniam, quis nostrum
|
|
exercitationem ullam corporis suscipit laboriosam, nisi
|
|
ut aliquid ex ea commodi consequatur? Quis autem vel eum
|
|
iure reprehenderit qui in ea voluptate velit esse quam
|
|
nihil molestiae consequatur, vel illum qui dolorem eum
|
|
fugiat quo voluptas nulla pariatur?"
|
|
</p>
|
|
<p>
|
|
The standard Lorem Ipsum passage, used since the 1500s
|
|
"Lorem ipsum dolor sit amet, consectetur adipiscing
|
|
elit, sed do eiusmod tempor incididunt ut labore et
|
|
dolore magna aliqua. Ut enim ad minim veniam, quis
|
|
nostrud exercitation ullamco laboris nisi ut aliquip ex
|
|
ea commodo consequat. Duis aute irure dolor in
|
|
reprehenderit in voluptate velit esse cillum dolore eu
|
|
fugiat nulla pariatur. Excepteur sint occaecat cupidatat
|
|
non proident, sunt in culpa qui officia deserunt mollit
|
|
anim id est laborum." Section 1.10.32 of "de Finibus
|
|
Bonorum et Malorum", written by Cicero in 45 BC "Sed ut
|
|
perspiciatis unde omnis iste natus error sit voluptatem
|
|
accusantium doloremque laudantium, totam rem aperiam,
|
|
eaque ipsa quae ab illo inventore veritatis et quasi
|
|
architecto beatae vitae dicta sunt explicabo. Nemo enim
|
|
ipsam voluptatem quia voluptas sit aspernatur aut odit
|
|
aut fugit, sed quia consequuntur magni dolores eos qui
|
|
ratione voluptatem sequi nesciunt. Neque porro quisquam
|
|
est, qui dolorem ipsum quia dolor sit amet, consectetur,
|
|
adipisci velit, sed quia non numquam eius modi tempora
|
|
incidunt ut labore et dolore magnam aliquam quaerat
|
|
voluptatem. Ut enim ad minima veniam, quis nostrum
|
|
exercitationem ullam corporis suscipit laboriosam, nisi
|
|
ut aliquid ex ea commodi consequatur? Quis autem vel eum
|
|
iure reprehenderit qui in ea voluptate velit esse quam
|
|
nihil molestiae consequatur, vel illum qui dolorem eum
|
|
fugiat quo voluptas nulla pariatur?"
|
|
</p>
|
|
<p>
|
|
The standard Lorem Ipsum passage, used since the 1500s
|
|
"Lorem ipsum dolor sit amet, consectetur adipiscing
|
|
elit, sed do eiusmod tempor incididunt ut labore et
|
|
dolore magna aliqua. Ut enim ad minim veniam, quis
|
|
nostrud exercitation ullamco laboris nisi ut aliquip ex
|
|
ea commodo consequat. Duis aute irure dolor in
|
|
reprehenderit in voluptate velit esse cillum dolore eu
|
|
fugiat nulla pariatur. Excepteur sint occaecat cupidatat
|
|
non proident, sunt in culpa qui officia deserunt mollit
|
|
anim id est laborum." Section 1.10.32 of "de Finibus
|
|
Bonorum et Malorum", written by Cicero in 45 BC "Sed ut
|
|
perspiciatis unde omnis iste natus error sit voluptatem
|
|
accusantium doloremque laudantium, totam rem aperiam,
|
|
eaque ipsa quae ab illo inventore veritatis et quasi
|
|
architecto beatae vitae dicta sunt explicabo. Nemo enim
|
|
ipsam voluptatem quia voluptas sit aspernatur aut odit
|
|
aut fugit, sed quia consequuntur magni dolores eos qui
|
|
ratione voluptatem sequi nesciunt. Neque porro quisquam
|
|
est, qui dolorem ipsum quia dolor sit amet, consectetur,
|
|
adipisci velit, sed quia non numquam eius modi tempora
|
|
incidunt ut labore et dolore magnam aliquam quaerat
|
|
voluptatem. Ut enim ad minima veniam, quis nostrum
|
|
exercitationem ullam corporis suscipit laboriosam, nisi
|
|
ut aliquid ex ea commodi consequatur? Quis autem vel eum
|
|
iure reprehenderit qui in ea voluptate velit esse quam
|
|
nihil molestiae consequatur, vel illum qui dolorem eum
|
|
fugiat quo voluptas nulla pariatur?"
|
|
</p>
|
|
<p>
|
|
The standard Lorem Ipsum passage, used since the 1500s
|
|
"Lorem ipsum dolor sit amet, consectetur adipiscing
|
|
elit, sed do eiusmod tempor incididunt ut labore et
|
|
dolore magna aliqua. Ut enim ad minim veniam, quis
|
|
nostrud exercitation ullamco laboris nisi ut aliquip ex
|
|
ea commodo consequat. Duis aute irure dolor in
|
|
reprehenderit in voluptate velit esse cillum dolore eu
|
|
fugiat nulla pariatur. Excepteur sint occaecat cupidatat
|
|
non proident, sunt in culpa qui officia deserunt mollit
|
|
anim id est laborum." Section 1.10.32 of "de Finibus
|
|
Bonorum et Malorum", written by Cicero in 45 BC "Sed ut
|
|
perspiciatis unde omnis iste natus error sit voluptatem
|
|
accusantium doloremque laudantium, totam rem aperiam,
|
|
eaque ipsa quae ab illo inventore veritatis et quasi
|
|
architecto beatae vitae dicta sunt explicabo. Nemo enim
|
|
ipsam voluptatem quia voluptas sit aspernatur aut odit
|
|
aut fugit, sed quia consequuntur magni dolores eos qui
|
|
ratione voluptatem sequi nesciunt. Neque porro quisquam
|
|
est, qui dolorem ipsum quia dolor sit amet, consectetur,
|
|
adipisci velit, sed quia non numquam eius modi tempora
|
|
incidunt ut labore et dolore magnam aliquam quaerat
|
|
voluptatem. Ut enim ad minima veniam, quis nostrum
|
|
exercitationem ullam corporis suscipit laboriosam, nisi
|
|
ut aliquid ex ea commodi consequatur? Quis autem vel eum
|
|
iure reprehenderit qui in ea voluptate velit esse quam
|
|
nihil molestiae consequatur, vel illum qui dolorem eum
|
|
fugiat quo voluptas nulla pariatur?"
|
|
</p>
|
|
</article>
|
|
</main>
|
|
</div>
|
|
|
|
<script>
|
|
window.addEventListener("scroll", (e) => {
|
|
//console.log(window.scrollY);
|
|
if (window.scrollY > 128) {
|
|
document
|
|
.querySelector("mwc-top-app-bar-fixed")
|
|
.removeAttribute("prominent");
|
|
} else if (window.scrollY < 64) {
|
|
document
|
|
.querySelector("mwc-top-app-bar-fixed")
|
|
.setAttribute("prominent", "prominent");
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|