Sticky Sections
How do I make an sticky sections?
Design concept with sticky sections. What is a sticky sections? How do you make a sticky sections? This script and codes were developed by Tyler Fowle on 12 August 2022, Friday.
Sticky Sections Previews
Sticky Sections - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Sticky Sections</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> <div class='block block_1'> <div class='image-holder img_1'></div> <div class='section section_1'> <div class='content'> <h1>Welcome.</h1> </div> </div> <div class='section section_2'> <div class='content'> <p>This is the first content section paragraph. This concept is pretty cool. It lets you have similiar blocks of content in a section with a background image that relates to that section. Or actually anything you want to do with it. I'm just rambling on and on so there is some text to read.</p> </div> </div> <div class='section section_3'> <div class='content'> <p>This is a long content section.</p> <p>This is a long content section. This is a long content section. This is a long content section. This is a long content section. This is a long content section. This is a long content section. This is a long content section. This is a long content section. This is a long content section. This is a long content section. This is a long content section. This is a long content section. This is a long content section. This is a long content section. This is a long content section. This is a long content section. This is a long content section. This is a long content section. This is a long content section. This is a long content section. This is a long content section. This is a long content section. This is a long content section. This is a long content section. This is a long content section. This is a long content section. This is a long content section. This is a long content section. This is a long content section. This is a long content section. This is a long content section. This is a long content section. This is a long content section. This is a long content section. This is a long content section. This is a long content section. This is a long content section. This is a long content section. This is a long content section. This is a long content section. This is a long content section.</p> </div> <div class='clearfix'></div> </div> <div class='divider divider_1'> <div class='content'> <p>This is a callout section, possible a button.</p> </div> </div>
</div>
<div class='block block_2'> <div class='image-holder img_2'></div> <div class='section section_1'> <div class='content'> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p> </div> <div class='clearfix'></div> </div> <div class='section section_2'> <div class='content'> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p> </div> <div class='clearfix'></div> </div> <div class='section section_3'> <div class='content'> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p> </div> <div class='clearfix'></div> </div> <div class='section section_4'> <div class='content'> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p> </div> <div class='clearfix'></div> </div>
</div>
<div class='divider divider_2'> <div class='content'> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> </div>
</div>
<div class='block block_3'> <div class='image-holder img_3'></div> <div class='section section_1'> <div class='content'> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p> </div> <div class='clearfix'></div> </div> <div class='section section_2'> <div class='content'> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p> </div> <div class='clearfix'></div> </div> <div class='section section_3'> <div class='content'> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p> </div> <div class='clearfix'></div> </div> <div class='section section_4'> <div class='content'> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p> </div> <div class='clearfix'></div> </div>
</div>
<div class='divider divider_3'> <div class='content'> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> </div>
</div>
<div class='block block_4'> <div class='image-holder img_4'></div> <div class='section section_1'> <div class='content'> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p> </div> <div class='clearfix'></div> </div> <div class='section section_2'> <div class='content'> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p> </div> <div class='clearfix'></div> </div> <div class='section section_3'> <div class='content'> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p> </div> <div class='clearfix'></div> </div> <div class='section section_4'> <div class='content'> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p> </div> <div class='clearfix'></div> </div>
</div>
<div class='divider divider_4'> <div class='content'> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> </div>
</div>
<div class='block block_5'> <div class='image-holder img_5'></div> <div class='section section_1'> <div class='content'> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p> </div> <div class='clearfix'></div> </div> <div class='section section_2'> <div class='content'> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p> </div> <div class='clearfix'></div> </div> <div class='section section_3'> <div class='content'> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p> </div> <div class='clearfix'></div> </div> <div class='section section_4'> <div class='content'> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p> </div> <div class='clearfix'></div> </div>
</div>
<div class='divider divider_5'> <div class='content'> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> </div>
</div>
<div class='block block_6'> <div class='image-holder img_6'></div> <div class='section section_1'> <div class='content'> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p> </div> <div class='clearfix'></div> </div> <div class='section section_2'> <div class='content'> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p> </div> <div class='clearfix'></div> </div> <div class='section section_3'> <div class='content'> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p> </div> <div class='clearfix'></div> </div> <div class='section section_4'> <div class='content'> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p> </div> <div class='clearfix'></div> </div>
</div>
<div class='divider divider_6'> <div class='content'> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> </div>
</div>
<div class='block block_7'> <div class='image-holder img_7'></div> <div class='section section_1'> <div class='content'> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p> </div> <div class='clearfix'></div> </div> <div class='section section_2'> <div class='content'> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p> </div> <div class='clearfix'></div> </div> <div class='section section_3'> <div class='content'> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p> </div> <div class='clearfix'></div> </div> <div class='section section_4'> <div class='content'> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p> </div> <div class='clearfix'></div> </div>
</div>
<div class='divider divider_7'> <div class='content'> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> </div>
</div>
<div class='block block_8'> <div class='image-holder img_8'></div> <div class='section section_1'> <div class='content'> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p> </div> <div class='clearfix'></div> </div> <div class='section section_2'> <div class='content'> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p> </div> <div class='clearfix'></div> </div> <div class='section section_3'> <div class='content'> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p> </div> <div class='clearfix'></div> </div> <div class='section section_4'> <div class='content'> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p> </div> <div class='clearfix'></div> </div>
</div>
<div class='divider divider_8'> <div class='content'> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Sticky Sections - Script Codes CSS Codes
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700);
* { box-sizing: border-box;
}
.clearfix:before,
.clearfix:after { content: ""; display: table;
}
.clearfix:after { clear: both;
}
.clearfix { zoom: 1;
}
html,
body { width: 100%; height: 100%; color: #fff; font-family: 'Open Sans', sans-serif; font-weight: 300;
}
body { background: #111;
}
.block { position: relative;
}
.image-holder { height: 100vh; width: 100%; position: absolute; z-index: -1; opacity: 0; background: 50% 50% / cover no-repeat; -webkit-transition: opacity .4s ease-out; transition: opacity .4s ease-out;
}
.img_1 { background-image: url("https://ununsplash.imgix.net/photo-1429105049372-8d928fd29ba1?fit=crop&fm=jpg&h=700&q=75&w=1050");
}
.img_2 { background-image: url("https://unsplash.imgix.net/reserve/nqr33LlRR66jA3Ez9mX7_fox-in-the-forest-by-jose-inesta.jpg?fit=crop&fm=jpg&h=700&q=75&w=1050");
}
.img_3 { background-image: url("https://unsplash.imgix.net/uploads/1412862685615b0212e3d/5fcb0a55?fit=crop&fm=jpg&h=700&q=75&w=1050");
}
.img_4 { background-image: url("https://unsplash.imgix.net/photo-1428591501234-1ffcb0d6871f?fit=crop&fm=jpg&h=700&q=75&w=1050");
}
.img_5 { background-image: url("https://ununsplash.imgix.net/photo-1422433555807-2559a27433bd?fit=crop&fm=jpg&h=700&q=75&w=1050");
}
.img_6 { background-image: url("https://ununsplash.imgix.net/photo-1421098518790-5a14be02b243?fit=crop&fm=jpg&h=600&q=75&w=1050");
}
.img_7 { background-image: url("https://ununsplash.imgix.net/photo-1422479516648-9b1f0b6e8da8?fit=crop&fm=jpg&h=725&q=75&w=1050");
}
.img_8 { background-image: url("https://unsplash.imgix.net/photo-1416838375725-e834a83f62b7?fit=crop&fm=jpg&h=700&q=75&w=1050");
}
.window_load .image-holder { opacity: 1;
}
.pos_fixed { position: fixed; top: 0; left: 0;
}
.pos_abs_bot .image-holder { position: absolute; top: auto; bottom: 0; left: 0;
}
.content { padding: 100px; max-width: 800px;
}
.section { min-height: 100vh;
}
.divider { background: #242424;
}
.divider_1 { background: coral;
}
.divider_2 { background: darkcyan;
}
.divider_3 { background: darkslategrey;
}
.divider_4 { background: gold; color: black;
}
.divider_5 { background: seagreen;
}
.divider_6 { background: olive;
}
.divider_7 { background: orangered;
}
.divider_8 { display: none;
}
.section { background: rgba(0, 0, 0, 0.3);
}
.section:nth-child(even) .content { float: right;
}
.section .content { font-size: 20px; line-height: 2; text-align: center;
}
.section_1 .content { width: 100%; max-width: none; font-size: 26px; line-height: 2;
}
h1 { font-weight: 300; font-size: 80px;
}
.divider .content { padding: 20px 100px; min-height: 100px;
}
@media screen and (max-width: 800px) { h1 { font-size: 40px; line-height: 1.5; } .section .content { font-size: 14px; line-height: 1.8; }
}Sticky Sections - Script Codes JS Codes
//window
$(window).load(function(){ $('body').addClass('window_load');
}); //end window load
//document
$(document).ready(function(){ $(window).scroll(function() { var $window = $(window); var viewportTop = $window.scrollTop(); var viewportBottom = viewportTop + $window.height(); //(blockBottom <= viewportBottom) && (blockTop >= viewportTop) $('.block').each(function(){ var thisTop = $(this).offset().top; var thisBot = thisTop + $(this).height(); if ( (thisBot <= viewportBottom) && (thisTop >= viewportTop) ) { $(this).addClass('active_block'); } else { $(this).removeClass('active_block'); } if( thisBot <= viewportBottom ) { $(this).addClass('pos_abs_bot'); } else { $(this).find('.image-holder').removeClass('pos_fixed'); $(this).removeClass('pos_abs_bot'); } }); $('.image-holder').each(function(){ var thisTop = $(this).offset().top; var thisBot = thisTop + $(this).height(); if( viewportTop >= thisTop ) { $(this).addClass('pos_fixed'); } else { $(this).removeClass('pos_fixed'); } }); });
});
| Developer | Tyler Fowle |
| Username | tylerfowle |
| Uploaded | August 12, 2022 |
| Rating | 3.5 |
| Size | 5,603 Kb |
| Views | 32,384 |
Do you need developer help for Sticky Sections?
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!
Tyler Fowle (tylerfowle) Script Codes
| Name | Size |
| Sass Off Canvas Nav | 4,534 Kb |
| Mobile Nav | 6,265 Kb |
| Nicescroll | 26,451 Kb |
| One Page Scroller | 3,800 Kb |
| Design Idea | 7,042 Kb |
| 3d Sticky Nav | 9,017 Kb |
| Material Cards | 3,346 Kb |
| FAQ accordion | 2,155 Kb |
| Flexbox Footer | 2,827 Kb |
| Online Autoprefixer | 3,155 Kb |
Create amazing blog posts 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!
Similar Scripts & Codes
| Name | Username | Size |
| CSS Grid Test | Ajaykarwal | 2,377 Kb |
| Project MMetro beta | Atomicsong | 5,157 Kb |
| SCSS Simple Animated Drop-In | Danwarfel | 2,175 Kb |
| Chuck Norris Background | Manz | 1,967 Kb |
| Flying Bee | Pwsm50 | 3,711 Kb |
| A Pen by Bryan | Brydave | 2,286 Kb |
| Tumblr API | Juanv911 | 2,436 Kb |
| Rows with image hover effect | Amit-webdesigner | 12,875 Kb |
| Day 1 - Portfolio | Chpecson | 3,532 Kb |
| Vanilla modal window | Jasonhowmans | 3,554 Kb |
Do you want hide your ip address?
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!