Sticky
Sections
Tabs
Scrolling
Information
Anchor
CSS
Search
K
Documentation
Webflow
Code
Setup: External Scripts
External Scripts in Webflow
Make sure to always put the External Scripts before the Javascript step of the resource.
In this video you learn where to put these in your Webflow project? Or how to include a paid GSAP Club plugin in your project?
HTML
Copy
Step 1: Copy structure to Webflow
Copy structure to Webflow
In the video below we described how you can copy + paste the structure of this resource to your Webflow project.
Copy to Webflow
Webflow structure is not required for this resource.
Step 1: Add HTML
HTML
Copy
<div class="demo-group">
<div class="demo-nav">
<div class="container">
<div class="demo-nav__content">
<svg class="demo-nav__logo-svg" xmlns="http://www.w3.org/2000/svg" width="100%" viewbox="0 0 178 40" fill="none"><path d="M161.77 13.4645C161.142 14.0944 160.069 13.6483 160.069 12.7574V0H156.084V15C156.084 16.6569 154.746 18 153.096 18H138.154V22H150.862C151.749 22 152.194 23.0771 151.566 23.7071L142.722 32.5858L145.539 35.4142L154.384 26.5356C155.01 25.9075 156.078 26.3491 156.084 27.2347V40L160.069 40L160.069 25C160.069 23.3431 161.407 22 163.058 22H178V18H165.284C164.404 17.9936 163.964 16.9273 164.582 16.2985L164.587 16.2929L173.432 7.41421L170.614 4.58582L161.77 13.4645Z" fill="currentColor"></path><path d="M16.084 37.178C6.27782 37.178 0 29.956 0 20.066C0 10.176 6.27782 3 16.084 3C25.8903 3 32.1681 10.176 32.1681 20.066C32.1681 29.956 25.8903 37.178 16.084 37.178ZM5.2697 20.066C5.2697 26.828 8.33987 32.808 16.084 32.808C23.8282 32.808 26.8984 26.828 26.8984 20.066C26.8984 13.304 23.8282 7.37 16.084 7.37C8.33987 7.37 5.2697 13.304 5.2697 20.066Z" fill="currentColor"></path><path d="M45.478 37.178C38.3754 37.178 34.847 33.498 34.7095 28.714H39.246C39.4293 31.428 41.0789 33.544 45.4322 33.544C49.373 33.544 50.4269 31.796 50.4269 30.094C50.4269 27.15 47.3109 26.828 44.2866 26.184C40.2083 25.218 35.5343 24.022 35.5343 19.146C35.5343 15.098 38.7878 12.384 44.4241 12.384C50.8393 12.384 53.9095 15.834 54.2303 19.882H49.6938C49.373 18.088 48.4107 16.018 44.5157 16.018C41.4914 16.018 40.2083 17.214 40.2083 18.962C40.2083 21.4 42.8202 21.63 46.1195 22.366C50.4269 23.378 55.1009 24.62 55.1009 29.864C55.1009 34.418 51.6183 37.178 45.478 37.178Z" fill="currentColor"></path><path d="M72.6642 21.492C72.6642 18.364 72.0227 16.248 68.5859 16.248C65.2408 16.248 63.1329 18.594 63.1329 22.136V36.534H58.6422V13.074H63.1329V16.018H63.2246C64.4618 14.224 66.6155 12.384 70.1439 12.384C73.3974 12.384 75.4136 13.856 76.3301 16.478H76.4217C78.1172 14.224 80.5 12.384 84.0742 12.384C88.7941 12.384 91.1769 15.236 91.1769 20.25V36.534H86.6862V21.492C86.6862 18.364 86.0447 16.248 82.6079 16.248C79.2628 16.248 77.1549 18.594 77.1549 22.136V36.534H72.6642V21.492Z" fill="currentColor"></path><path d="M106.545 37.224C99.2594 37.224 94.8603 32.164 94.8603 24.804C94.8603 17.49 99.2594 12.338 106.591 12.338C113.831 12.338 118.23 17.444 118.23 24.758C118.23 32.118 113.831 37.224 106.545 37.224ZM99.5343 24.804C99.5343 29.68 101.734 33.498 106.591 33.498C111.357 33.498 113.556 29.68 113.556 24.804C113.556 19.882 111.357 16.11 106.591 16.11C101.734 16.11 99.5343 19.882 99.5343 24.804Z" fill="currentColor"></path></svg>
<ul class="demo-nav__ul">
<li class="demo-nav__li">Home</li>
<li class="demo-nav__li">Work</li>
<li class="demo-nav__li">About</li>
<li class="demo-nav__li">Contact</li>
</ul>
</div>
</div>
</div>
<section class="demo-header">
<div class="container">
<h1 class="demo-section__title">Sticky Section Tabs</h1>
</div>
</section>
<!-- Sticky Tab Sections - Start -->
<div class="sticky-tab-group">
<div class="sticky-tab-group__nav-bg"></div>
<section class="sticky-tab">
<div class="sticky-tab__sticky">
<div class="sticky-tab__inner">
<div class="container">
<div class="sticky-tab__content">
<h2 class="sticky-tab__title">Step 1: Concept</h2>
</div>
</div>
</div>
</div>
<div class="container">
<div class="sticky-tab__placeholder-content">
<svg class="osmo-icon-svg" xmlns="http://www.w3.org/2000/svg" width="100%" viewbox="0 0 160 160" fill="none"><path d="M94.8284 53.8578C92.3086 56.3776 88 54.593 88 51.0294V0H72V59.9999C72 66.6273 66.6274 71.9999 60 71.9999H0V87.9999H51.0294C54.5931 87.9999 56.3777 92.3085 53.8579 94.8283L18.3431 130.343L29.6569 141.657L65.1717 106.142C67.684 103.63 71.9745 105.396 72 108.939V160L88.0001 160L88 99.9999C88 93.3725 93.3726 87.9999 100 87.9999H160V71.9999H108.939C105.407 71.9745 103.64 67.7091 106.12 65.1938L106.142 65.1716L141.657 29.6568L130.343 18.3432L94.8284 53.8578Z" fill="currentColor"></path></svg>
</div>
</div>
</section>
<section class="sticky-tab">
<div class="sticky-tab__sticky">
<div class="sticky-tab__inner">
<div class="container">
<div class="sticky-tab__content">
<h2 class="sticky-tab__title">Step 2: Design</h2>
</div>
</div>
</div>
</div>
<div class="container">
<div class="sticky-tab__placeholder-content">
<svg class="osmo-icon-svg" xmlns="http://www.w3.org/2000/svg" width="100%" viewbox="0 0 160 160" fill="none"><path d="M94.8284 53.8578C92.3086 56.3776 88 54.593 88 51.0294V0H72V59.9999C72 66.6273 66.6274 71.9999 60 71.9999H0V87.9999H51.0294C54.5931 87.9999 56.3777 92.3085 53.8579 94.8283L18.3431 130.343L29.6569 141.657L65.1717 106.142C67.684 103.63 71.9745 105.396 72 108.939V160L88.0001 160L88 99.9999C88 93.3725 93.3726 87.9999 100 87.9999H160V71.9999H108.939C105.407 71.9745 103.64 67.7091 106.12 65.1938L106.142 65.1716L141.657 29.6568L130.343 18.3432L94.8284 53.8578Z" fill="currentColor"></path></svg>
</div>
</div>
</section>
<section class="sticky-tab">
<div class="sticky-tab__sticky">
<div class="sticky-tab__inner">
<div class="container">
<div class="sticky-tab__content">
<h2 class="sticky-tab__title">Step 3: Development</h2>
</div>
</div>
</div>
</div>
<div class="container">
<div class="sticky-tab__placeholder-content">
<svg class="osmo-icon-svg" xmlns="http://www.w3.org/2000/svg" width="100%" viewbox="0 0 160 160" fill="none"><path d="M94.8284 53.8578C92.3086 56.3776 88 54.593 88 51.0294V0H72V59.9999C72 66.6273 66.6274 71.9999 60 71.9999H0V87.9999H51.0294C54.5931 87.9999 56.3777 92.3085 53.8579 94.8283L18.3431 130.343L29.6569 141.657L65.1717 106.142C67.684 103.63 71.9745 105.396 72 108.939V160L88.0001 160L88 99.9999C88 93.3725 93.3726 87.9999 100 87.9999H160V71.9999H108.939C105.407 71.9745 103.64 67.7091 106.12 65.1938L106.142 65.1716L141.657 29.6568L130.343 18.3432L94.8284 53.8578Z" fill="currentColor"></path></svg>
</div>
</div>
</section>
<section class="sticky-tab">
<div class="sticky-tab__sticky">
<div class="sticky-tab__inner">
<div class="container">
<div class="sticky-tab__content">
<h2 class="sticky-tab__title">Step 4: Party 🎉</h2>
</div>
</div>
</div>
</div>
<div class="container">
<div class="sticky-tab__placeholder-content">
<svg class="osmo-icon-svg" xmlns="http://www.w3.org/2000/svg" width="100%" viewbox="0 0 160 160" fill="none"><path d="M94.8284 53.8578C92.3086 56.3776 88 54.593 88 51.0294V0H72V59.9999C72 66.6273 66.6274 71.9999 60 71.9999H0V87.9999H51.0294C54.5931 87.9999 56.3777 92.3085 53.8579 94.8283L18.3431 130.343L29.6569 141.657L65.1717 106.142C67.684 103.63 71.9745 105.396 72 108.939V160L88.0001 160L88 99.9999C88 93.3725 93.3726 87.9999 100 87.9999H160V71.9999H108.939C105.407 71.9745 103.64 67.7091 106.12 65.1938L106.142 65.1716L141.657 29.6568L130.343 18.3432L94.8284 53.8578Z" fill="currentColor"></path></svg>
</div>
</div>
</section>
</div>
<!-- Sticky Tab Sections - End -->
<section class="demo-section">
<div class="container">
<h2 class="demo-section__title">More content</h2>
</div>
</section>
<footer class="demo-footer">
<div class="container">
<h2 class="demo-footer__title">Footer</h2>
</div>
</footer>
</div>HTML structure is not required for this resource.
Step 2: Add CSS
CSS
Copy
:root {
--nav-height: 6em;
}
.container {
max-width: 90em;
margin-left: auto;
margin-right: auto;
padding-left: 2em;
padding-right: 2em;
}
/* Demo Nav */
.demo-nav {
z-index: 20;
width: 100%;
position: fixed;
top: 0;
left: 0;
}
.demo-nav__content {
height: var(--nav-height);
justify-content: space-between;
align-items: center;
display: flex;
}
.demo-nav__logo-svg {
width: 7em;
}
.demo-nav__ul {
grid-column-gap: 2em;
grid-row-gap: 2em;
justify-content: flex-start;
align-items: center;
margin-top: 0;
margin-bottom: 0;
padding-left: 0;
display: flex;
}
.demo-nav__li {
font-size: 1.25em;
line-height: 1;
list-style: none;
}
/* Demo Header */
.demo-header {
background-color: #000;
padding-top: 25vh;
padding-bottom: 10vh;
}
/* Sticky Tabs */
.sticky-tab-group {
overflow: clip;
}
.sticky-tab-group__nav-bg {
z-index: 2;
height: var(--nav-height);
background-color: #000;
border-bottom: 1px solid #ffffff26;
width: 100%;
position: sticky;
top: 0;
left: 0;
}
.sticky-tab {
background-color: #131313;
position: relative;
overflow: clip;
}
.sticky-tab__sticky {
z-index: 1;
top: calc(var(--nav-height) - 1px);
flex-flow: column;
margin-top: -1px;
display: flex;
position: sticky;
box-shadow: 0 .25em .5em 0 #00000040;
}
.sticky-tab__inner {
background-color: #000;
border-top: 1px solid #ffffff26;
border-bottom: 1px solid #ffffff26;
justify-content: space-between;
align-items: center;
padding-top: 2em;
padding-bottom: 2em;
}
.sticky-tab__content {
justify-content: space-between;
align-items: center;
display: flex;
}
.sticky-tab__title {
margin-top: 0;
margin-bottom: 0;
font-size: 2.25em;
font-weight: 500;
line-height: 1;
}
.sticky-tab__placeholder-content {
justify-content: center;
align-items: center;
height: 66vh;
display: flex;
}
.sticky-tab__before-bg {
height: calc(var(--nav-height) + 2px);
background-color: #000;
width: 100%;
position: absolute;
bottom: 100%;
}
/* Demo Section */
.demo-section {
padding-top: 45vh;
padding-bottom: 45vh;
}
.demo-section__title {
max-width: 6em;
font-size: 7em;
font-weight: 500;
line-height: 1;
}
/* Demo Footer */
.demo-footer {
border-top: 1px solid #ffffff26;
padding-top: 2em;
padding-bottom: 2em;
}
.demo-footer__title {
max-width: 6em;
font-size: 2.25em;
font-weight: 500;
line-height: 1;
}
/* Osmo Icon */
.osmo-icon-svg {
width: 8em;
}
/* Media Queries */
@media screen and (max-width: 767px) {
.sticky-tab__title {
font-size: 2em;
}
.demo-section__title {
font-size: 4em;
}
.demo-nav__ul {
display: none;
}
.demo-footer__title {
font-size: 4em;
}
}
@media screen and (max-width: 479px) {
.container {
padding-left: 1em;
padding-right: 1em;
}
}Step 2: Add custom Javascript
Custom Javascript in Webflow
In this video, Ilja gives you some guidance about using JavaScript in Webflow:
Step 2: Add Javascript
Step 3: Add Javascript
Javascript
Copy
Step 3: Add custom CSS
Step 2: Add custom CSS
Custom CSS in Webflow
Curious about where to put custom CSS in Webflow? Ilja explains it in the below video:
CSS
Copy
/* Optional: Create the --nav-height: 6em; in your variable panel to skip this step */
:root {
--nav-height: 6em;
}Implementation
Nav Height Variable
In the demo, we set the navigation height to 6em. Make sure to change this to the size of your navigation bar. Since this value is used repeatedly to calculate offsets, we defined it as a variable for convenience: --nav-height: 6em;. If you set the variable to 0, the navigation will stick to the top, which is useful in cases where you don’t have a fixed navigation bar.
Demo Sections *optional
The resource includes a demo navigation, section, header, and footer, which are provided for demonstration purposes only. The only mandatory elements for the resource are the .sticky-tab-group and its child elements. You can customize the content inside the .container div of each .sticky-tab to suit your needs.
Search
K
Resource Details
Last updated
January 24, 2025
Type
The Vault
Category
Dropdowns & Information
Need help?
Join Slack
Original source
Dennis SnellenbergCreator Credits
We always strive to credit creators as accurately as possible. While similar concepts might appear online, we aim to provide proper and respectful attribution.