Scroll image next to element height

Question

I am trying to achieve a top attribute increase in regards to the element its currently next to. The element needs to only scroll right next to the element and should stop when its passed the element height.

What i want to achieve: the image needs to stick beside the element to the right with jQuery and stop 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>

Answer 1

You can make the figure element fixed until the bottom of it reaches the bottom of .other-content, then make it absolutely positioned with bottom: 0, then remove absolute positioning when you've scrolled back up past the top of the figure element.

var $figure = $('figure'),
  $other = $('.other-content'),
  other_bottom = $other.offset().top + $other.outerHeight();

$(window).on('scroll', function() {
  var scroll = $(window).scrollTop(),
    figure_top = $figure.offset().top,
    figure_bottom = $figure.offset().top + $figure.outerHeight();
  if (!$figure.hasClass('abs') && figure_bottom >= other_bottom) {
    $figure.addClass('abs');
  }
  if ($figure.hasClass('abs') && scroll < figure_top) {
    $figure.removeClass('abs');
  }
});

body {
  height: 500vh;
  margin: 0;
}

.article {
  width: 100%;
  display: block;
}

.wrapper {
  position: relative;
  overflow: auto;
}

figure {
  position: fixed;
  left: 0;
  top: 0;
  width: 50%;
  padding: 0;
  margin: 0;
  overflow: hidden;
}

.abs {
  position: absolute;
  bottom: 0;
  top: auto;
}

.other-content {
  background-color: black;
  float: right;
  overflow: hidden;
  display: block;
  width: 50%;
  height: 800px;
}

img {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.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>