I have an element called .listing__nav which I want to pin upon scroll.
When the .listing__nav touches the top of the window, I want it to become fixed and to unpin only when the banner element comes into view.
To achieve this, I've tried the following:
$(function() {
var action = gsap.set('.listing__nav', {
position: 'fixed',
paused: true
});
ScrollTrigger.create({
trigger: '.listing__nav',
start: 'top 0px',
onEnter: () => action.play(),
onLeaveBack: () => action.reverse(),
});
gsap.to('.listing__nav', {
ease: 'none',
scrollTrigger: {
trigger: ".banner",
scrub: 0.3,
end: 'bottom 110%',
markers: false,
}
});
});:root {
--black: #000000;
--white: #FFFFFF;
--grey: #707070;
}
header {
background-color: var(--grey);
padding: 30px 0;
}
.spacer {
background-color: var(--black);
height: 300px;
}
.listing__nav {
padding: 80px 0 52px 0;
border-bottom: 1px solid var(--black);
}
.listing__spacer {
padding: 100px 0;
height: 1000px;
background-color: var(--black);
}
.banner {
background-color: var(--grey);
color: var(--white);
padding: 60px 0;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/ScrollTrigger.min.js"></script>
<main>
<header>Header</header>
<div class="spacer"></div>
<div class="listing">
<nav class="listing__nav">Nav</nav>
<div class="listing__spacer">Spacer</div>
</div>
<div class="banner">Banner</div>
</main>As you can see, the .listing__nav doesn't pin where intended instead pinning at the bottom of the window, giving it glitchy behaviour.
Resolved it with the below JS.
I was creating two ScrollTriggers which was not required.
$(function() {
ScrollTrigger.create({
trigger: '.listing__nav',
pin: true,
start: 'top top',
scrub: 0.5,
endTrigger: ".banner",
end: "top bottom",
pinSpacing: false,
markers: true
});
});