Position Sticky
How do I make an position sticky?
A scoop of plain vanilla JavaScript that adds the position sticky effect to any element; supporting configurations with padding, margin, and top.. What is a position sticky? How do you make a position sticky? This script and codes were developed by Jonathan Neal on 30 August 2022, Tuesday.
Position Sticky - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Position Sticky</title> <meta name="viewport" content="width=device-width,initial-scale=1"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <section> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod harum repellat ratione dignissimos, aliquam voluptas rem repellendus quisquam molestiae magnam animi tempora, ad. Repellendus possimus enim, facere, id expedita autem.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod harum repellat ratione dignissimos, aliquam voluptas rem repellendus quisquam molestiae magnam animi tempora, ad. Repellendus possimus enim, facere, id expedita autem.</p>
</section>
<main> <section> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod harum repellat ratione dignissimos, aliquam voluptas rem repellendus quisquam molestiae magnam animi tempora, ad. Repellendus possimus enim, facere, id expedita autem.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod harum repellat ratione dignissimos, aliquam voluptas rem repellendus quisquam molestiae magnam animi tempora, ad. Repellendus possimus enim, facere, id expedita autem.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod harum repellat ratione dignissimos, aliquam voluptas rem repellendus quisquam molestiae magnam animi tempora, ad. Repellendus possimus enim, facere, id expedita autem.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod harum repellat ratione dignissimos, aliquam voluptas rem repellendus quisquam molestiae magnam animi tempora, ad. Repellendus possimus enim, facere, id expedita autem.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod harum repellat ratione dignissimos, aliquam voluptas rem repellendus quisquam molestiae magnam animi tempora, ad. Repellendus possimus enim, facere, id expedita autem.</p> </section> <aside> <menu></menu> <menu></menu> <figure><div></div></figure> <menu></menu> </aside>
</main>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod harum repellat ratione dignissimos, aliquam voluptas rem repellendus quisquam molestiae magnam animi tempora, ad. Repellendus possimus enim, facere, id expedita autem.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod harum repellat ratione dignissimos, aliquam voluptas rem repellendus quisquam molestiae magnam animi tempora, ad. Repellendus possimus enim, facere, id expedita autem.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod harum repellat ratione dignissimos, aliquam voluptas rem repellendus quisquam molestiae magnam animi tempora, ad. Repellendus possimus enim, facere, id expedita autem.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod harum repellat ratione dignissimos, aliquam voluptas rem repellendus quisquam molestiae magnam animi tempora, ad. Repellendus possimus enim, facere, id expedita autem.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod harum repellat ratione dignissimos, aliquam voluptas rem repellendus quisquam molestiae magnam animi tempora, ad. Repellendus possimus enim, facere, id expedita autem.</p>
<section> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod harum repellat ratione dignissimos, aliquam voluptas rem repellendus quisquam molestiae magnam animi tempora, ad. Repellendus possimus enim, facere, id expedita autem.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod harum repellat ratione dignissimos, aliquam voluptas rem repellendus quisquam molestiae magnam animi tempora, ad. Repellendus possimus enim, facere, id expedita autem.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod harum repellat ratione dignissimos, aliquam voluptas rem repellendus quisquam molestiae magnam animi tempora, ad. Repellendus possimus enim, facere, id expedita autem.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod harum repellat ratione dignissimos, aliquam voluptas rem repellendus quisquam molestiae magnam animi tempora, ad. Repellendus possimus enim, facere, id expedita autem.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod harum repellat ratione dignissimos, aliquam voluptas rem repellendus quisquam molestiae magnam animi tempora, ad. Repellendus possimus enim, facere, id expedita autem.</p>
</section> <script src="js/index.js"></script>
</body>
</html>
Position Sticky - Script Codes CSS Codes
* { box-sizing: border-box; margin: 0;
}
main { display: -ms-flexbox; display: -webkit-flex; display: flex;
}
body { font-size: 18px; line-height: 30px; padding: 0 calc(50vw - 240px);
}
aside, p { margin-top: 30px;
}
aside { -ms-flex-negative: 0; -webkit-flex-shrink: 0; flex-shrink: 0; margin-left: 1em; padding: 1em;
}
menu, figure { height: 100px; margin: 30px 0 20px; top: 60px; width: 100px;
}
figure { background-color: orange; position: relative; position: -webkit-sticky; position: sticky;
}
menu { background-color: blue;
}
figure div, menu div { background-color: red; border-radius: 50%; height: 25px; left: 25px; position: absolute; top: 25px; width: 25px;
}
Position Sticky - Script Codes JS Codes
function sticky(target) { target.style.position = 'relative'; target.style.position = '-webkit-sticky'; target.style.position = 'sticky'; if (target.style.position === 'relative') { var targetTop, targetStart, targetLength, lastTop; var onresize = function () { lastTop = target.style.top = null; targetTop = parseFloat(getComputedStyle(target).top) || 0; targetStart = target.getBoundingClientRect().top + window.pageYOffset - document.documentElement.offsetTop; targetLength = target.parentNode.getBoundingClientRect().bottom - parseFloat(getComputedStyle(target.parentNode).paddingBottom) - parseFloat(getComputedStyle(target).marginBottom) - target.getBoundingClientRect().bottom + targetTop; onscroll(); }; var onscroll = function () { var offset = window.pageYOffset - targetStart + targetTop + targetTop; var top = (offset >= 0 ? (offset <= targetLength ? offset : targetLength) : 0) + 'px'; if (lastTop !== top) { lastTop = target.style.top = top; } }; onresize(); window.addEventListener('resize', onresize); window.addEventListener('scroll', onscroll); }
}
// demo implementation
sticky(document.querySelector('figure'));
Developer | Jonathan Neal |
Username | jonneal |
Uploaded | August 30, 2022 |
Rating | 3 |
Size | 2,743 Kb |
Views | 28,336 |
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!
Name | Size |
Chevrons in CSS | 1,908 Kb |
Aim-Aware Menus | 2,950 Kb |
Element Query Classnames | 3,243 Kb |
Forty Lines for Smooth Hash Scrolling | 3,377 Kb |
Preload Example | 2,335 Kb |
Responsive Text Sizes | 2,269 Kb |
Autohide Bars | 2,570 Kb |
Yelp Ratings SVG | 2,284 Kb |
Color Tiles | 2,479 Kb |
SVG for Everybody | 3,207 Kb |
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!
Name | Username | Size |
Ball bouncing loading animation | Adam2326 | 3,144 Kb |
Three js | Paulq | 2,353 Kb |
Animated skewed panes | NyX | 4,462 Kb |
Background Images | Jooonebug | 2,100 Kb |
Slider css only | Armandobau | 2,161 Kb |
Fun form with currentColor | Bnthor | 2,713 Kb |
Slick Slider | Wearebold | 5,913 Kb |
Two column of responsive height | Fixie | 2,908 Kb |
Canvas Background Effect | Sonick | 3,513 Kb |
We Simplify animation | Meodai | 48,169 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!