react-stickyfill-fork
Version:
React wrapper for Stickyfill library
151 lines (139 loc) • 2.51 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>react-stickyfill</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body{
margin: 0;
text-align: center;
font-family: helvetica, arial, sans-serif;
color: #fff;
}
.cf:before,
.cf:after {
content: " ";
display: table;
}
.cf:after {
clear: both;
}
h2{
text-transform: uppercase;
font-size: 50px;
letter-spacing: 3px;
font-weight: bold;
}
.section{
height: 100vh;
}
.before, .after{
display: flex;
justify-content: center;
align-items: center;
}
.before{
background-color: #BB3101;
}
.parent{
background-color: #383C44;
height: 200vh;
}
.parent2{
background-color: #242930;
height: 200vh;
}
.parent3{
background-color: #444950;
height: 200vh;
}
.after {
background-color: #007DEA;
}
.child,
.child2, .child2-active,
.child3{
position: static;
top: 50px;
margin: 50px;
padding: 30px;
border-radius: 10px;
font-size: 25px;
background-color: #EA7C00;
}
.child, .child2-active, .child3{
position: -webkit-sticky;
position: sticky;
background-color: #2BBA00;
}
.note{
font-size: 20px;
line-height: 1.5;
text-transform: none;
font-weight: 100;
}
.media{
font-family: monospace;
display: block;
background-color: #1B9A00;
padding: 10px 5px;
margin: 10px 0;
font-size: 16px;
}
.child2 .media{
background-color: #CA5C00;
}
.custom-section {
overflow: hidden;
}
.overlay {
overflow: auto;
height: 500px;
}
.block {
height: 100px;
background-color: black;
}
.header {
background-color: blue;
height: 100px;
position: relative;
}
.sticky {
top: 0;
position: sticky;
height: 50px;
background-color: red;
}
.scrollable {
height: 2000px;
}
</style>
</head>
<body>
<div id="app"></div>
<script src="./build/index.js"></script>
</body>
</html>
<!--<!DOCTYPE html>-->
<!--<html lang="en">-->
<!--<head>-->
<!--<meta charset="UTF-8">-->
<!--<title>react-stickyfill</title>-->
<!--<meta name="viewport" content="width=device-width, initial-scale=1">-->
<!--<style>-->
<!--body {-->
<!--font-family: sans-serif;-->
<!--}-->
<!--#app {-->
<!--overflow: hidden;-->
<!--}-->
}
<!--</style>-->
<!--</head>-->
<!--<body>-->
<!--<div id="app"></div>-->
<!--<script src="./build/index.js"></script>-->
<!--</body>-->
<!--</html>-->