Pinned scrolling sections

Developer
Corinne Winthrop
Size
4,467 Kb
Views
28,336
  1. Pinned scrolling sections Previews
  2. Pinned scrolling sections HTML Codes
  3. Pinned scrolling sections CSS Codes
  4. Pinned scrolling sections JS Codes

How do I make an pinned scrolling sections?

What is a pinned scrolling sections? How do you make a pinned scrolling sections? This script and codes were developed by Corinne Winthrop on 08 October 2022, Saturday.

Pinned scrolling sections Previews
IQ Test

Pinned scrolling sections - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Pinned scrolling 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="header bookend"> <p>hi this is some kind of content here for while</p>
</div>
<div class="method"> <div class="method__inner"> <div class="method__wrap"> <div class="method__single method__single--1 panel fade-in"> <div class="method__inside"> <div class="method__content"> <h3>Phase 1: Lay the Groundwork</h3> <p>Laying the Groundwork is about getting organized to conduct a successful Heart &amp; Soul project. This is when you gather partners, form a team of volunteers, figure out how they will coordinate with each other, set goals, and establish what will be included in the process. It's also important to find out who lives and works in the community and set up a communications strategy to reach them.</p> </div> <div class="method__img"> <img src="https://us.123rf.com/450wm/natulrich/natulrich0901/natulrich090100069/4171472-four-small-funny-kittens-isolated-on-white-background.jpg?ver=6" alt=""> </div> </div> </div> <div class="method__single method__single--2"> <div class="method__inside"> <div class="method__content"> <h3>Phase 2: Explore Your Community</h3> <p>Explore Your Community is vital to the Heart &amp; Soul approach. Activities in this phase focus on attracting a broad, diverse mix of people to help identify what matters most. Telling personal stories about local experiences is a key engagement strategy in this phase bringing people together and finding common ground. This phase ends in articulating that common ground in Heart &amp; Soul Statements, which guide activities and results in phases 3 and 4.</p> </div> <div class="method__img"> <img src="https://us.123rf.com/450wm/dixi_/dixi_1110/dixi_111000012/10800608-british-kitten-on-white-background.jpg?ver=6" alt=""> </div> </div> </div> <div class="method__single method__single--3"> <div class="method__inside"> <div class="method__content"> <h3>Phase 3: Make Decisions</h3> <p>Making Decisions is about how to protect and enhance your community's heart and soul--what matters most--and building toward a future that honors them. What are the options available to your community and which should be pursued? Also important to the decision-making process is figuring out when things will be done. What will you do this year? What will you work on later?</p> </div> <div class="method__img"> <img src="https://us.123rf.com/450wm/dixi_/dixi_1110/dixi_111000055/11065325-siberian-kitten-on-white-background.jpg?ver=6" alt=""> </div> </div> </div> <div class="method__single method__single--4"> <div class="method__inside"> <div class="method__content"> <h3>Phase 4: Take Action</h3> <p>Taking action is about following through with the action plan and doing the work needed to produce lasting results. One important action is to create a Stewardship Team that will keep watch on how the other actions are progressing. This leadership team coordinates the work and communicates progress to keep community members engaged and decision-makers accountable. This team also looks for ways to infuse civic culture and any community decision-making with the three Heart &amp; Soul Principles.</p> </div> <div class="method__img"> <img src="https://us.123rf.com/450wm/dixi_/dixi_1110/dixi_111000056/11065321-siberian-kitten-on-white-background.jpg?ver=6" alt=""> </div> </div> </div> </div> </div>
</div>
<div class="footer bookend"> <p>hi this is some kind of content here for while</p>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Pinned scrolling sections - Script Codes CSS Codes

.header { background: #AACAF0;
}
.bookend { height: 400px; color: white; display: flex; align-items: center; justify-content: center; font-size: 24px;
}
.footer { background: #A5B1DF;
}
.method { background-color: white;
}
.method__wrap { position: relative; display: flex; align-items: center; justify-content: center; height: 400vh;
}
.method__single { position: absolute; display: flex; align-items: center; justify-content: center; max-width: 1140px; margin: auto; top: 0; left: 0; right: 0; height: 100vh; display: flex; align-items: center; padding: 0 0.957rem; opacity: 0; transition: 300ms;
}
.method__single--4 { top: auto; bottom: 0; height: 25%;
}
.method__single.fade-in { opacity: 1;
}
.sticky .method__single { position: fixed;
}
.method__inside { display: flex; justify-content: space-between; align-items: center; height: 80%; padding: 2.871rem 0.957rem; border-top: 1px solid #21578a; border-bottom: 1px solid #21578a;
}
.method__content { width: 45%; padding: 1.914rem 0;
}
.method__image { width: 48%;
}
@media (max-width: 800px) { .method__wrap { flex-wrap: wrap; height: auto; } .method__single { position: relative; width: 100%; opacity: 1; height: auto; } .method__inside { flex-wrap: wrap; height: auto; border-bottom: none; } .method__content { width: 100%; } .method__image { width: 100%; }
}

Pinned scrolling sections - Script Codes JS Codes

/*------------------------------------*\ ::Scrolling Sections
\*------------------------------------*/
var scrollingSections = function(){ var $window = $(window); window.resizeScrollingSection = null; // checking desktop width var ifAbove800 = function(){ // if we're at desktop if($window.width() > 800){ animateSections(); // if we're not at desktop }else{ $('.method__wrap').removeClass('sticky'); $(window).unbind('scroll'); } }; var animateSections = function() { var fourthMethodHeight = $('.method').height() / 4; var methodTop = $('.method__inner').offset().top; var $parent = $('.method__wrap'); var $single = $('.method__single'); var $single1 = $('.method__single--1'); var $single2 = $('.method__single--2'); var $single3 = $('.method__single--3'); var $single4 = $('.method__single--4'); $(window).scroll(function(event){ if ($(window).scrollTop() > methodTop) { $parent.addClass('sticky'); $single.removeClass('fade-in'); $single1.addClass('fade-in'); }else{ $parent.removeClass('sticky'); } if($(window).scrollTop() > (methodTop + fourthMethodHeight)){ $single.removeClass('fade-in'); $single2.addClass('fade-in'); } if($(window).scrollTop() > (methodTop + (fourthMethodHeight * 2) )){ $single.removeClass('fade-in'); $single3.addClass('fade-in'); } if($(window).scrollTop() > (methodTop + (fourthMethodHeight * 3) )){ $single.removeClass('fade-in'); $parent.removeClass('sticky'); $single4.addClass('fade-in'); } // console.log($('.method__wrap').offset()); // console.log($(window).scrollTop()); // console.log(methodTop + $('.method').height()); }); }; ifAbove800(); // on resize, call that same function $window.on('resize', function(){ clearTimeout(resizeScrollingSection); window.resizeScrollingSection = setTimeout(ifAbove800, 10); });
};
jQuery(function($){ scrollingSections();
});
Pinned scrolling sections - Script Codes
Pinned scrolling sections - Script Codes
Home Page Home
Developer Corinne Winthrop
Username cwint
Uploaded October 08, 2022
Rating 3
Size 4,467 Kb
Views 28,336
Do you need developer help for Pinned scrolling 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!

Corinne Winthrop (cwint) Script Codes
Name
Email obfuscation test
Animated SVG sequence
Crazy Cat Lady Application
Image tiling
Another animated SVG sequence
A Pen by Corinne Winthrop
Cat vs Mouse
Responsive Image Tiling
VUE
Responsive image sizes
Create amazing art & images 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!