Stick one item when scrolling with slider animation

by Sreeraj Saseendran

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/sticky-kit/1.1.3/sticky-kit.min.js"></script>
<h1>My Site</h1>
<div class="content" >
  <div class="sidebar" id="sidebar" >
    This is a sticky column
    
     <div class="content-right">
     <div class="border-moving">
     
     </div>
   <ul>
   <li>1</li>
   <li>2</li>
   <li>3</li>
   </ul>
  </div>
  </div>

  <div class="main" data-sticky_column="">
    This is the main column
    <p class="sub">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras tempus id
      leo et aliquam. Proin consectetur ligula vel neque cursus laoreet. Nullam
      dignissim, augue at consectetur pellentesque, metus ipsum interdum
      sapien, quis ornare quam enim vel ipsum.
    </p>
    <p class="sub">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras tempus id
      leo et aliquam. Proin consectetur ligula vel neque cursus laoreet. Nullam
      dignissim, augue at consectetur pellentesque, metus ipsum interdum
      sapien, quis ornare quam enim vel ipsum.
    </p>
    <p class="sub">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras tempus id
      leo et aliquam. Proin consectetur ligula vel neque cursus laoreet. Nullam
      dignissim, augue at consectetur pellentesque, metus ipsum interdum
      sapien, quis ornare quam enim vel ipsum.
    </p>
    <p class="sub">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras tempus id
      leo et aliquam. Proin consectetur ligula vel neque cursus laoreet. Nullam
      dignissim, augue at consectetur pellentesque, metus ipsum interdum
      sapien, quis ornare quam enim vel ipsum.
    </p><p class="sub">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras tempus id
    leo et aliquam. Proin consectetur ligula vel neque cursus laoreet. Nullam
    dignissim, augue at consectetur pellentesque, metus ipsum...

CSS

body {
  margin: 0;
  font-family: sans-serif;
  font-size: 16px; }

h1 {
  font-size: 30px;
  margin: 10px; }

.content {
  overflow: hidden; }
  .content.right .sidebar {
    float: right;
    margin: 10px;
    margin-left: 0; }
  .content.right .main {
    margin: 10px;
    margin-right: 220px; }
  .content.double .main {
    margin-left: 434px; }
  .content .sidebar {
    width: 200px;
    min-height: 66px;
    margin: 10px;
    margin-right: 0;
    border: 1px solid red;
    float: left;
    overflow: hidden;
    font-family: sans-serif; }
    .content .sidebar.alt {
      height: 133px; }
    .content .sidebar.tall {
      height: 400px; }
    .content .sidebar.medium {
      height: 300px; }
    .content .sidebar.flat {
      border: 0;
      height: auto; }
  .content .inner {
    border: 1px solid red;
    height: 66px;
    margin: 10px 0; }
    .content .inner.static {
      margin-top: 0;
      border: 1px solid blue; }
  .content .item {
    display: inline-block;
    vertical-align: top;
    width: 120px;
    border: 1px solid blue;
    font-size: 16px;
    margin: 10px;
    overflow: hidden; }
    .content .item.sticky {
      border: 1px solid red;
      height: 100px; }
  .content .inline_columns {
    font-size: 0; }
  .content .main {
    margin: 10px;
    margin-left: 222px;
    border: 1px solid blue;
    min-height: 400px;
    overflow: hidden; }
    .content .main.short {
      height: 133px; }
    .content .main.tall {
      height: 600px; }

.footer {
  margin: 10px;
  text-align: center;
  font-size: 13px;
  border-top: 1px dashed #dadada;
  color: #666;
  padding-top: 10px;
  min-height: 133px; }

.sub {
  color: #999; }

@media all and (max-width: 500px) {
  .content .sidebar {
    width: 100px; }
  .content .item {
    width: 60px; }
  .content .main {
    margin-left: 122px; }
  .content.double .main {
    margin-left: 234px; }
  .content.right .main {
    margin-right: 120px; } }
    
    
    
    .content .content-right {
   ...

JavaScript

//alert($);
$("#sidebar").stick_in_parent();
let fullHeightBigContent = $('.main').height();
let fullHeightSubContent = $('.content-right').height();
let initialTopBigContent = $('.main').offset().top;
let fullheightSingleItem = $('.border-moving').height();
let scrollTopBigContent = 0;
let movingContentTop = 0;
$(window).scroll(()=>{


  scrollTopBigContent = $('.content-right').offset().top - initialTopBigContent;
  //console.log("\n\nfullHeightBigContent="+fullHeightBigContent);
//console.log("\nscrollTopBigContent="+scrollTopBigContent);
//console.log("\nfullHeightSubContent="+fullHeightSubContent);
  if(scrollTopBigContent >= 0) {
    movingContentTop =  ((fullHeightSubContent*scrollTopBigContent)/fullHeightBigContent);
    $('.border-moving').css({'top':movingContentTop});
  }

console.log("\nmovingContentTop="+movingContentTop);

});