jQuery/Bootstrap follow div with hover item

Question

I have a basic search result page using bootstrap and when I hover on an item RHS div should follow and slide to that specific item. Please refer to the following page to see what I'm trying to achieve. How can I achieve this using jQuery?

Example

JS Fiddle

<div class="fluid-container">
  <div class="row">
      <div class="col-md-7">
          <div class="search-result">
              Search result
          </div>

          <div class="search-result">
              Search result
          </div>

          <div class="search-result">
              Search result
          </div>

          <div class="search-result">
              Search result
          </div>

          <div class="search-result">
              Search result
          </div>

          <div class="search-result">
              Search result
          </div>
      </div>

      <div class="col-md-3">
          <div class="availability">
              Slide Down
          </div>
      </div>
  </div>
</div>

Answer 1

$(document).ready(function(){
var positionY=0;
	$('.search-result').hover(function(){
  var position=$(this).position();
 	positionY=$(this).get(0).getBoundingClientRect().y;
  /* transform: translateY(51px); */
  $('.availability').css({transform:'translateY('+(positionY-15)+'px)'});
  })
})

.search-result {
    background-color: green;
    padding: 45px 20px;
    color: #fff;
    margin: 15px 0;
}

.availability {
   background-color: red;
   padding: 45px 20px;
   color: #fff;
   margin: 15px 0;
   position: fixed;
   top: 1px;
   right: 10px;
   /* display:none; */
}

<script
			  src="https://code.jquery.com/jquery-3.4.1.js"
			  integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
			  crossorigin="anonymous"></script>
<div class="fluid-container">
  <div class="row">
      <div class="col-md-7">
          <div class="search-result">
              Search result
          </div>
          
          <div class="search-result">
              Search result
          </div>
          
          <div class="search-result">
              Search result
          </div>
          
          <div class="search-result">
              Search result
          </div>
          
          <div class="search-result">
              Search result
          </div>
          
          <div class="search-result">
              Search result
          </div>
      </div>
      
      <div class="col-md-3">
          <div class="availability">
              Slide Down
          </div>
      </div>
  </div>
</div>

Answer 2

You can animate the marginTop property. Note: To use the animate method you'll have to drop jquery.slim and use the full version. Run the snippet on fullscreen, otherwise bootstrap's breakpoints kick-in.

$('.search-result').on('mouseover', function() {
  // Cancel previous animation
  $('.availability').stop();
  // Get position of the triggered element
  let newTop = $(this).offset().top + 'px';
  // Animate availability box
  $('.availability').animate({
    marginTop: newTop
  }, 800);
})

.search-result {
  background-color: green;
  padding: 45px 20px;
  color: #fff;
  margin: 15px 0;
}

.availability {
  background-color: red;
  padding: 45px 20px;
  color: #fff;
  margin: 15px 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="fluid-container">
  <div class="row">
    <div class="col-md-7">
      <div class="search-result">
        Search result
      </div>
      <div class="search-result">
        Search result
      </div>
      <div class="search-result">
        Search result
      </div>
      <div class="search-result">
        Search result
      </div>
      <div class="search-result">
        Search result
      </div>
      <div class="search-result">
        Search result
      </div>
    </div>

    <div class="col-md-3">
      <div class="availability">
        Slide Down
      </div>
    </div>
  </div>
</div>