Estoy tratando de implementar la siguiente configuración:
Cuando un usuario se desplaza hacia abajo en mi página web, quiero que el desplazamiento funcione normalmente, hasta llegar a una sección donde tengo una serie de pestañas verticales. Una vez que esta sección esté en la ventana gráfica, el sitio web debe dejar de desplazarse hacia abajo en la página, y las pestañas deben desplazarse y activarse desde la Pestaña 1 a la Pestaña 3 (esto luego recorrerá las imágenes en el lado derecho). Cuando hayan terminado, la página debería continuar desplazándose normalmente de nuevo.
Lo mismo debería suceder cuando el usuario se desplaza de abajo hacia arriba.
Puede ver la configuración de la página en este enlace: https://preview.webflow.com/preview/project-1-6122b1?utm_medium=preview_link&utm_source=designer&utm_content=project-1-6122b1&preview=fd86a586af36e4b67d5937f5cf64535c&workflow=preview
El sitio está integrado en Webflow, pero Webflow no le permite cambiar el estado de la pestaña en el desplazamiento, solo le permite cambiar el CSS en el desplazamiento, lo que no ayuda, ya que necesitamos las pestañas para abrir las imágenes relevantes en el RHS cuando se desplaza hacia abajo.
Desafortunadamente, no puedo exportar el código de Webflow, así que lo replicaré lo más fielmente posible desde aquí:
<body> <div class="tabs w-tabs"> <div class=" tabs-menu w-tab-menu"> <a class="tab-link-tab-1 w-inline-block w-tab-link"> Tab 1 - Labrador </a> <a class="tab-link-tab-1 w-inline-block w-tab-link"> Tab 2 - Golden Retriever </a> <a class="tab-link-tab-1 w-inline-block w-tab-link"> Tab 3 - Puppy </a> </div> <div class=" w-tab-content"> <a class="w-tab-pane"> IMAGE 1 </a> <a class="w-tab-pane"> IMAGE 2 </a> <a class="w-tab-pane"> IMAGE 3</a> </div> </div> </body>¿Quieres decir algo como esto? No puedo entender lo que quiere decir en esta área cuando dijo "Una vez que esta sección esté en la ventana gráfica, ¿el sitio web debería dejar de desplazarse hacia abajo en la página"? ¿Quiere decir que se debe fijar el retraso?
$(document).ready(function(){ var scroll_pos = 0; $(document).scroll(function() { scroll_pos = $(this).scrollTop(); if(scroll_pos > 0 ) { $("li#tab1").css('background-color', 'blue'); } else { $("li#tab1").css('background-color', ''); } if(scroll_pos > 800) { $("li#tab2").css('background-color', 'blue'); $("li#tab1").css('background-color', ''); } else { $("li#tab2").css('background-color', ''); } if(scroll_pos > 1600) { $("li#tab3").css('background-color', 'blue'); $("li#tab2").css('background-color', ''); } else { $("li#tab3").css('background-color', ''); } }); }); nav { position: relative; padding-bottom: 12px; padding-top: 20px; padding-right: 10px; padding-left: 20px; background-color:black; position:fixed; top:0; right:0; left:0; width:100px; } nav .line { height: 2px; position: absolute; bottom: 0; margin: 10px 0 0 0; background: #ff4242; } nav ul { padding: 0; margin: 0; list-style: none; display: -webkit-box; display: -ms-flexbox; display: grid; } nav ul li { margin: 0 40px 0 0; opacity: .4; -webkit-transition: all 0.4s ease; transition: all 0.4s ease; } nav ul li:hover { opacity: .7; } nav ul li.active { opacity: 1; } nav ul li:last-child { margin-right: 0; } nav ul li a { text-decoration: none; color: #fff; text-transform: uppercase; display: block; font-weight: 600; letter-spacing: .2em; font-size: 14px; } .tab1, .tab2, .tab3 { height:800px; text-align:center; padding-top:50px; color:#fff; font-size:50px; } .tab1 {background-color:lightblue;} .tab2 {background-color:lightgreen;} .tab3 {background-color:yellow;} <html> <script src="https://code.jquery.com/jquery-3.5.0.js"></script> <body> <nav> <ul> <li id="tab1"><a href="#" >TAB 1</a></li> <li id="tab2"><a href="#" >TAB 2</a></li> <li id="tab3"><a href="#" >TAB 3</a></li> </ul> </nav> <div class="tab1">THIS IS IMAGE 1 </div> <div class="tab2">THIS IS IMAGE 2</div> <div class="tab3">THIS IS IMAGE 3</div> </body> </html>