Stickybits Demo

Developer
Jeff Wainwright
Size
4,576 Kb
Views
42,504
  1. Stickybits Demo Previews
  2. Stickybits Demo HTML Codes
  3. Stickybits Demo CSS Codes
  4. Stickybits Demo JS Codes

How do I make an stickybits demo?

This is Stickybits demo: a lightweight (<2KB) alternative to position: sticky polyfills 🍬.https://github.com/dollarshaveclub/stickybits. What is a stickybits demo? How do you make a stickybits demo? This script and codes were developed by Jeff Wainwright on 08 December 2022, Thursday.

Stickybits Demo Previews
IQ Test

Stickybits Demo - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Stickybits Demo</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <header class="header"> <a href="" class="header__link"> <h1 class="header__title">Stickybits</h1> <p>Check out Stickbits on Github</p> </a>
</header>
<main id="main" class="main">
<div id="parent-1" class="parent parent-1"><div id="child-1" class="child child-1"><p>Child 1</p></div></div>
</main> <script src="js/index.js"></script>
</body>
</html>

Stickybits Demo - Script Codes CSS Codes

body,
html { color: white; font-family: sans-serif; margin: 0; padding: 0;
}
header { text-align: center;
}
header h1 { margin-bottom: 0;
}
a { color: black; text-decoration: none;
}
a:hover { text-decoration: underline;
}
main { counter-reset: div; display: -webkit-box; display: -ms-flexbox; display: flex; height: 100%; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; max-width: 100vw; min-height: 2000px; position: absolute; top: 100px; width: 100%;
}
.child { padding: 1rem 0; text-indent: 1rem; width: 100%;
}
.parent { height: 100%; position: relative; width: 100%;
}
.parent:nth-child(odd) { background: tan;
}
.parent:nth-child(odd) .child { background-color: red;
}
.parent:nth-child(even) { background: aqua;
}
.parent:nth-child(even) .child { background-color: green;
}
.parent:before { counter-increment: div; content: "Parent " counter(div); left: 1rem; position: absolute; top: 1rem; z-index: 2;
}
.child.js-is-sticky { top: 0;
}
.child.js-is-stuck { bottom: 0;
}

Stickybits Demo - Script Codes JS Codes

(function (global, factory) { typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() : typeof define === 'function' && define.amd ? define(factory) : (global.stickybits = factory());
}(this, (function () { 'use strict';
/* STICKYBITS
Stickybits Demo - Script Codes
Stickybits Demo - Script Codes
Home Page Home
Developer Jeff Wainwright
Username yowainwright
Uploaded December 08, 2022
Rating 3
Size 4,576 Kb
Views 42,504
Do you need developer help for Stickybits Demo?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Jeff Wainwright (yowainwright) Script Codes
Name
Reframe.js Example
A Pen by Jeff Wainwright
Stickybits with a custom vertical position
Playing with URLs and ScrollSpy
Multiple Swiper Demo
ScrollDir Example
Stickybits Multiple Instances Demo
Meeting Schedule Widget with Angular
Quick Bootstrap ScrollSpy Demo
Shave, a javascript plugin for truncating text
Create amazing Facebook ads with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!