My goal is to create a single vertical line that starts at a defined point (using CSS) and ends at a point that I have not yet specified.
The concept is for the line to remain sticky or increase in height as the user scrolls, until it reaches the end point.
However, I am unsure about the logic I should implement to achieve this.
Here is an example of what currently does not work: https://jsfiddle.net/uzegqn7f/
The objective is for the line to extend, for instance, to the top of the second image following the user's scrolling position.
<div class="vertical-line line-1"></div>
<img src="https://dummyimage.com/900x300/000000/fff.jpg" alt="" class="line-1-start">
<div class="content"></div>
<img src="https://dummyimage.com/900x300/000000/fff.jpg" alt="" class="line-1-end">
.content {
height:1000px;
}
img {
max-width:100%;
height:auto;
}
.vertical-line {
display: block;
position: absolute;
background: #ee403d;
width: 4px;
height: 10px;
z-index: 999;
}
.line-1 {
margin-left:10%;
margin-top:100px;
}
var distance = $('.line-1-end').offset().top - $('.line-1-start').offset().top;
function line_animation(element,distance) {
$(window).scroll(function(){
element.css("height", distance+"px");
});
}
$(document).on('load resize', function() {
var line1 = $(".line-1");
line_animation(line1,distance);
});
PLEASE NOTE:
- The spacing between elements may vary and is not consistently the same, especially in responsive layouts.