DIV TEXT Fixed only in DIV PAI space

Question

Hello, I’d like to do the following.

<div class="pai">
  <div class="form"></div>
  <div class="text"></div>
</div>

I have a div FATHER And inside of it are two divs on each other’s side. The height of the div FORM depends on the amount of content that may vary. The height of the div TEXT is fixed.
I want when I div it FORM is bigger than the div TEXT, the div TEXT stay Fixed rolling along the page, but with a limit of scrolling until the end of the div FORM.

Just as in the picture if the div FORM is bigger than the div TEXT and the page is rolled, the div TEXT will roll along until it reaches the end of the div FORM. It’s like a navbar-Fixed-top, but it won’t roll the whole site, but it will roll until it’s aligned with the div FORM, by aligning with the div FORM.
If it’s rolled up again, the div TEXT will roll until you reach the top of the div FORM.
In short, always using FORM as a reference for the div TEXT that will only be Fixed in case the div FORM be greater.
Remembering that I am using bootstrap, I almost got it with affix, but when it aligns with the base of div FORM instead of remaining static aligned to base, it returns to its original position.

Answer 1

See if this is more or less what you thought.

$(document).ready(function() {
  var hForm = $('.form');
  var hText = $('.text');
  var lText = $('.text').offset().left;
  var tText = $('.text').position().top;
  console.log(tText);

  $(window).on('scroll', function() {
    var scroll = $(this).scrollTop();

    if (scroll >= hForm) scroll = hForm;
    else if (scroll <= tText) scroll = tText;

    if (hForm.height() > hText.height()) {
      hText.css({
        'top': scroll
      });
    }
  });
});

.pai {
  border: 1px solid black;
  margin: auto;
  width: 500px;
  display: table;
  position: relative;
}
.form {
  width: 50%;
  float: left;
  vertical-align: top;
  background-color: #FFF;
}
.text {
  width: 50%;
  float: right;
  vertical-align: top;
  background-color: #555;
  top: 0;
  position: relative;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pai">
  <div class="form">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum non rem praesentium nesciunt voluptatum aspernatur repudiandae dolor dolores pariatur, numquam laudantium impedit molestiae minus fuga libero veniam, dicta fugiat exercitationem. Lorem ipsum
    dolor sit amet, consectetur adipisicing elit. Explicabo optio enim magni reprehenderit, ipsam quas, in libero accusamus voluptatum porro eveniet omnis mollitia veniam. Saepe optio vero debitis totam corrupti. Lorem ipsum dolor sit amet, consectetur
    adipisicing elit. Fuga, iure, aliquid. Eius molestias numquam totam culpa, eum distinctio deserunt quibusdam quo? Ex, rem, iste. Omnis molestias nostrum laudantium voluptatum hic!
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed nulla suscipit consectetur sunt, eius ad, dolores eaque, ipsam qui dolorum id omnis voluptatum eligendi numquam provident magni nisi, praesentium maiores.</div>
    <div>Earum iure repudiandae nisi voluptas ipsa minima cupiditate unde, esse repellendus. Distinctio error non ad quas inventore, et optio obcaecati molestias rerum omnis impedit, libero a odit! Dicta, ipsum accusantium.</div>
    <div>Fugiat facilis, quam debitis error animi rem alias, beatae quibusdam ea quaerat neque mollitia. Eligendi consequuntur ut ipsam esse maxime laudantium eos dolorem magni consectetur quisquam magnam, delectus aliquam doloribus.</div>
    <div>Tempore perspiciatis molestias omnis quia sed nulla ut possimus illo facilis repellendus veritatis ex voluptate eveniet beatae, sequi incidunt nemo. Nesciunt, non, fugit. Mollitia dolores, ab ipsa sequi eum tempore?</div>
  </div>
  <div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut harum facilis eius quaerat maxime. Quibusdam ut autem dolorem, ullam ad nam, deserunt nesciunt molestias eius, unde magni. Non quas, eveniet.</div>
</div>