I am attempting to increase the top attribute in relation to the element it is currently adjacent to. The element should only scroll directly next to the other element and cease when it surpasses the height of that element.
My Goal: I want the image to remain fixed beside the element on the right using jQuery, stopping at the end of the element.
var objectSelect = $(".article");
var objectPosition = objectSelect.offset().top;
//if (scroll > objectPosition) {
// objectSelect.find('article').addClass("fixable").find('figure').addClass("fixable");
//} else {
// objectSelect.find('article').removeClass("fixable").find('figure').removeClass("fixable");
//}body{
height:1000px;
}
.article {
width: 100%;
display: block;
}
.wrapper {
position: relative;
}
figure {
position: absolute;
left: 0;
top: 0;
width: 50%;
padding: 0;
margin: 0;
overflow: hidden;
}
.other-content {
background-color: black;
float: right;
overflow: hidden;
display: block;
width: 50%;
height: 800px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="article">
<div class="wrapper">
<figure>
<img src="https://placeholdit.imgix.net/~text?txtsize=53&txt=566%C3%97780&w=566&h=500" />
</figure>
<div class="other-content">
</div>
</div>
</div>