滾動后 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>