如何在到达视口中间时修复div位置？

Question

我有参考图像附加的描述。如图所示，它有两个并排的部分。一个是图像（手机和平板电脑），第二个是功能。这整个部分是在折叠之下。

现在，当用户滚动查看它时，当图像到达视口的垂直中间时，它的位置应该保持固定。虽然它的位置是固定的，但功能应该正常滚动。当一个特征离开视口时，图像应该改变。当所有要素都在视口之外时，图像的位置应该再次变为静态。

我正在使用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

您的图片无法使用，因此这是一个通用的解决方案。当您滚动到图像减去浏览器视口高度的一半时，您所要做的就是将元素更改为position: fixed;

＆＃13;

＆＃13;

$(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');
  }
});

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;