divの位置がビューポートの中央に届いたら修正するには？

Question

図のように2つのセクションが並んでいます.1つは画像（モバイルとタブレット）用、2つ目はフィーチャーです。このセクション全体が折りたたみの下にあります。

ユーザーがスクロールして表示すると、イメージがビューポートの垂直に真ん中に届くと、その位置は固定されたままになります。位置が固定されている間は、通常のようにスクロールする必要があります。すべてのフィーチャがビューポートから外れると、イメージの位置は再び静的になります。私はここで...

をthis.Pleaseヘルプのskrollr JSプラグインを使用しています

はコード

.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

あなたのイメージが機能していないです、ここでは一般的な解決策があります。あなたがしなければならないのは、あなたがイメージがマイナス半分は、ブラウザのビューポートの高さ

$(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>