title: keep element always visible while moving it up and down
body: <p>I'm trying to keep <code>titleact</code> always visible while moving it up and down, but sometimes it goes outside of parent's borders.</p>
  
  <p>I don't want to scroll parent each time a button is clicked but only if <code>titleact</code> is near to the top/bottom border.</p>
  
  <p>Any help?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$('.title').on('click', function() {
    $('.titleact').removeClass('titleact');
    $(this).addClass('titleact');
  });
  
  $('.btnup').click(function() {
    let obj = $('.titleact');
    let i = obj.index('.title');
    if (i == 0) {
      return;
    }
    let targ = $('.title').eq(i - 1);
    obj.insertBefore(targ);
  
    let parent = obj.parent();
    if (obj.offset().top &lt;= parent.offset().top) {
      parent.animate({
        scrollTop: parent.scrollTop() - parent.height() - obj.position().top
      });
    }
  });
  
  $('.btndown').click(function() {
    let obj = $('.titleact');
    let i = obj.index('.title');
    let count = $('.title').length;
    if (i == count - 1) {
      return;
    }
    let targ = $('.title').eq(i + 1);
    obj.insertAfter(targ);
  
    let parent = obj.parent();
    let h1 = obj.outerHeight(true);
    if (obj.offset().top + h1 &gt;= parent.offset().top + parent.height()) {
      parent.animate({
        scrollTop: parent.scrollTop() + parent.height() - h1
      });
    }
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.parent {
    border: 2px solid lightseagreen;
    height: 120px;
    overflow-y: scroll;
  }
  
  .title {
    padding: 2px 0;
    margin: 3px 0;
    cursor: pointer;
  }
  
  .titleact {
    background: gold;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class='parent' id='parent'&gt;
    &lt;div class='title titleact'&gt;lorem ipsum&lt;/div&gt;
    &lt;div class='title'&gt;lorem ipsum&lt;/div&gt;
    &lt;div class='title'&gt;lorem ipsum&lt;/div&gt;
    &lt;div class='title'&gt;lorem ipsum&lt;/div&gt;
    &lt;div class='title'&gt;lorem ipsum&lt;/div&gt;
    &lt;div class='title'&gt;lorem ipsum&lt;/div&gt;
    &lt;div class='title'&gt;lorem ipsum&lt;/div&gt;
    &lt;div class='title'&gt;lorem ipsum&lt;/div&gt;
    &lt;div class='title'&gt;lorem ipsum&lt;/div&gt;
    &lt;div class='title'&gt;lorem ipsum&lt;/div&gt;
    &lt;div class='title'&gt;lorem ipsum&lt;/div&gt;
    &lt;div class='title'&gt;lorem ipsum&lt;/div&gt;
    &lt;div class='title'&gt;lorem ipsum&lt;/div&gt;
    &lt;div class='title'&gt;lorem ipsum&lt;/div&gt;
    &lt;div class='title'&gt;lorem ipsum&lt;/div&gt;
  &lt;/div&gt;
  &lt;br&gt;
  &lt;button class='btnup'&gt;UP&lt;/button&gt;
  &lt;button class='btndown'&gt;DOWN&lt;/button&gt;</code></pre>
  </div>
  </div>
  </p>