Tengo un elemento llamado .listing__nav que quiero anclar al desplazarme.
Cuando el .listing__nav toca la parte superior de la window , quiero que se arregle y se desancle solo cuando el elemento del banner aparezca a la vista.
Para lograr esto, he intentado lo siguiente:
$(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> Como puede ver, el .listing__nav no se ancla donde se pretendía, sino que se ancla en la parte inferior de la ventana, lo que le da un comportamiento defectuoso.
Lo resolvió con el siguiente JS .
Estaba creando dos ScrollTriggers que no eran necesarios.
$(function() { ScrollTrigger.create({ trigger: '.listing__nav', pin: true, start: 'top top', scrub: 0.5, endTrigger: ".banner", end: "top bottom", pinSpacing: false, markers: true }); });