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

我的确切问题与使用类似skrollr js的插件有关

我有一个带有图像及其特征的特征部分。特征在列表项div中，图像在另一个div中。这两个部分是col-sm-6并排的

我正试图做的是，在滚动到view port center后，将图像分割的位置精确地固定在中间。这样，如果有人向下滚动以查看图像，在其中心接触view port center后，图像应该保持固定。当图像保持固定时，列表项应该滚动

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

这是密码

图形丰富
完全适应
使用的颜色
用户界面/用户体验兼容
可怕的编码

$（文档）.ready（函数（）{
$（窗口）。滚动（函数（）{
if（$（window.scrollTop（））>（$（'#content'）.offset（）.top+$（'#content'）.innerHeight（））{
$（'divv'）.css（{'position'：'fixed'，'top'：$（window.outerHeight（）/2}）；
}  
否则{
$（'divv'）.css（{'position'：'relative'}）；
}
})
})

#内容首字母{
边缘顶部：1500px；
}
#迪夫{
宽度：100px；
高度：100px；
背景：绿色；
}  
#内容{位置：相对；}
#更多内容{
高度：1000px；
}

@Shashank希望您能得到答案，如果您还有问题，请详细说明。好的，这很酷。我知道我可以用偏移方法检测div在视口中的位置，但在绿色div正好滚动到中间后，如何将其固定在中间呢。我也不需要绿色div下面的任何内容。所有列表项和绿色div在页面上并排显示（如浮动左和右）。虽然绿色div位于中间，但只有li会滚动到最后一个li，之后绿色div也会滚动hanks，但没有帮助。