到达视口中间时如何固定div位置？

Question

I have reference image attach for description.As in figure it is having two section side by side.One is for image(mobile and tablet) and second is for is features.This whole section is below the fold.

Now when user scrolls to view it and when image reaches vertically middle of the viewport its position should remain fixed.While its position is fixed features should scroll as normally.As one feature goes out of viewport image should change. When all features are out of viewport, position of image should again become static.

I am using skrollr js plugin for this.Please help...

Here is the code

 .featurenav { margin: 0px; padding: 0px; list-style: none; } .featurenav li:before { content: url('../images/point.png'); position: absolute; left: 0px; top: 5px } .featurenav li { font-family: OpenSans-Light; color: #838b80; font-size: 30px; margin-bottom: 90px; padding-left: 83px; position: relative; } .color { float: left; width: 74px; height: 74px; margin: 30px 25px 0px 0px; border-radius: 5px; } .color1 { background-color: #c9bda3; } .color2 { background-color: #c99a32; } .color3 { background-color: #838b80; } .color4 { background-color: #fff; } .showcase img { width: 100%; } .showcase img:not(:first-child) { display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="col-xs-12 padding-zero"> <div class="col-sm-6"> <ul class="featurenav"> <li class="firstli">Graphical Layout</li> <li class="secondli">Open sans Font Used</li> <li class="thirdli">Colors Used <br> <div class="color color1"></div> <div class="color color2"></div> <div class="color color3"></div> <div class="color color4"></div> <div class="clearfix"></div> </li> <li class="fourthli">Parallax Smooth Scrolling</li> <li class="fifthli">Adaptable</li> </ul> </div> <div class="col-sm-6 showcase"> <img src="images/mobile_tablet.png" data-bottom-top="display:block" alt="showcase" data-anchor-target=".firstli" /> <img src="images/mobile_tablet_2.png" alt="showcase" /> <img src="images/mobile_tablet_3.png" alt="showcase" /> <img src="images/mobile_tablet_4.png" alt="showcase" /> <img src="images/mobile_tablet_5.png" alt="showcase" /> </div> <div class="clearfix"></div> </div> 

Answer 1

Your images aren't working, so here's a generic solution. All you have to do is change the element to position: fixed; when you scroll to wherever the image is minus half the browser viewport height

 $(window).on('load', function() { $affix = $('#affix'); $affix.attr('data-affix', $affix.offset().top); }).on('scroll', function() { var scrolled = $(window).scrollTop(), vh = $(window).height(), halfView = (vh / 2), scrollPoint = $affix.attr('data-affix') - halfView; if (scrolled >= scrollPoint) { $('img').addClass('fixed'); } else { $('img').removeClass('fixed'); } }); 

 * {margin:0;} section { height: 500vh; } img { max-width: 600px; width: 100%; } .fixed { position: fixed; top: 50%; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <section></section> <section><img id="affix" src="http://plusquotes.com/images/quotes-img/cool_cat.jpg" data-affix></section>