I have a query regarding how to expand the width of a div within an li element.
Essentially, as a user scrolls, the sidebar on the right-hand side will cause the span element (highlighted with a red background color) inside the li to transition from 0 to 100. To put it simply, when the first corresponding div comes into view, the span elements in the respective li items will adjust their widths from 0 to 100% based on the user's scrolling direction. This effect serves as an indicator of how much of the div has been scrolled by the user.
I have created a code pen example that demonstrates the desired functionality https://codepen.io/hellouniverse/pen/xdVJQp
Here is a snippet of my CSS:
.sidebar {
position: fixed;
max-width: 300px;
&__list {
position: relative;
text-align: center;
padding: 10px;
margin: 10px auto;
border: 2px solid #f3f2f0;
list-style-type: none;
display: inline-flex;
flex-direction: column;
}
// The primary red bar at the bottom that increases in width with scroll
span {
background-color: red;
height: 5px;
}
The issue lies within the javascript portion: I believe 1. We need to determine the height of the associated div 2. Adjust the span's width by a specific percentage based on the calculated height mentioned in step 1.
I am struggling to write the necessary code. Could someone provide assistance?
// Checks if an element is visible within the window
function isScrolledIntoView(elem) {
'use strict';
if (elem.length > 0) {
var docViewTop = jQuery(window).scrollTop();
var docViewBottom = docViewTop + jQuery(window).height();
var elemTop = jQuery(elem).offset().top;
return ((elemTop <= docViewBottom) && (elemTop >= docViewTop));
}
}
var lastScrollTop = 0;
$(window).scroll(function() {
// Adjusting the span's width within the li as you scroll
var height = $('section-just-in').height();
var incrementBy = 300 / height;
$('.sidebar__list span').animate({
// Increase width from 0 to 100%
width : width + incrementBy
});
})