I am trying to implement the following setup:
When a user scrolls down my web page, I want scroll to function normally, until they reach a section where I have a series of vertical tabs. Once this section is in the viewport, the website should stop scrolling down the page, and the tabs should scroll and activate from Tab 1- Tab 3 (this will then cycle through the images on the right hand side). When they are finished, the page should continue to scroll as normal again.
The same should happen when the user is scrolling from bottom to top.
You can see the page setup at this link:https://preview.webflow.com/preview/project-1-6122b1?utm_medium=preview_link&utm_source=designer&utm_content=project-1-6122b1&preview=fd86a586af36e4b67d5937f5cf64535c&workflow=preview
The site is built in Webflow, but Webflow doesnt allow you to change tab status on scroll, it only lets you change CSS on scroll, whcih does not help since we need the tabs to open the relevant images on the RHS when you scroll down.
Unfortunately I cannot export the code from Webflow so I will replicate it as closely as I can from here:
<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>You mean something like this? I cant understand what you mean in this area when you said "Once this section is in the viewport, the website should stop scrolling down the page"?? do you mean is should fixed delay?
$(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>