滚动后，div 位置应保持固定

Question

我的确切问题与使用像插件一样的skrollr js有关。

我有带有图像及其功能的功能部分。功能位于列表项div 中，图像位于另一个div 中。这两个分区并排位于 col-sm-6 中。

我真正想做的只是在滚动到视口中心后将图像分割精确地固定在中心的位置。因此，如果有人向下滚动以查看图像，则在其中心接触视口中心后，它应该保持固定。当图像保持固定时，应滚动列表项。

图像位置将再次变为静态，并在最后一个列表项离开视口后滚动内容。所以任何建议...

这是代码

<div class='container'>
    <div class='row'>
    
    
    <div class='col-sm-6'>
    <ul class='featuresnav'>
    <li>Graphically Rich</li>
    <li>Fully Adaptable</li>
    <li>Colors used</li>
    <li>UI/UX Compatible</li>
    <li>Awesome coding</li>
    </ul>
    </div>
        
    <div class='col-sm-6'>
    <img src='images/mobile_tablet.png' alt="display image"/>
    </div>    
        
        
        
        
    </div> <!--row ends-->
    </div> <!--container ends-->

Answer 1

$(document).ready(function(){
    $(window).scroll(function(){
if(($(window).scrollTop())>($('#content').offset().top+$('#content').innerHeight()))  {
    $('#divv').css({'position':'fixed','top':$(window).outerHeight()/2});
     
}  
     else{
    
  $('#divv').css({'position':'relative'});  
}
    
})
})

 #content-initial{
        margin-top:1500px;
        
    }
    #divv{
        width:100px;
            height:100px;
        background:green;
    }  
    #content{position:relative;}
    #somemorecontent{
        height:1000px;
        
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="content-initial"></div>
    <div id="content">
    <ul>
    <li></li>
    <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
    <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul>
        </div>
   
    <div id="divv"></div>
    <div id="somemorecontent"></div>