jquery - 想要图像向上滚动，然后卡住，然后文本滚动到它上面

Question

我有一个元素，其背景图像比屏幕高度略高。当用户向下滚动时，我希望图像向上滚动直到图像底部与窗口底部齐平，然后卡住图像，然后让文本在图像顶部滚动。

我有两个问题。一个是，我希望文本具有透明背景，这样它就可以在图像上流动，而不会有覆盖背景图像的白色背景。如果用户以另一种方式滚动，另一个是将所有内容倒转。请问有人有解决办法吗？

$(document).ready(function() {

  var heightOfIntro = $('#partone').height() - $(window).height();


  $(function() {
    $(window).scroll(function() {
      if ($(this).scrollTop() >= heightOfIntro) {
        $('.parallax').css('background-attachment', 'fixed');

      } else {
        $('.parallax').css('background-attachment', 'absolute');
      }


    });
  });


});

.parallax {
  /* Full height */
  height: 1180px;
  background-attachment: absolute;
  background-position: right top;
  background-repeat: no-repeat;
  position: relative;
}

.parallax#partone {
  background-image: url('../img/rogers_bg.jpg');
  background-color: #eaf1f4;
}

.story {
  width: 50%;
  padding: 20px;
  overflow: hidden;
}

.story p {
  color: black;
  font-family: 'proxima-nova', sans-serif;
  font-size: 100%;
  line-height: 110%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parallax" id="partone">
  <div class="story">
    <p>Mr. Utterson the lawyer was a man of a rugged countenance, that was never lighted by a smile; cold, scanty and embarrassed in discourse; backward in sentiment; lean, long, dusty, dreary, and yet somehow lovable. At friendly meetings, and when the
      wine was to his taste, something eminently human beaconed from his eye; something indeed which never found its way into his talk, but which spoke not only in these silent symbols of the after-dinner face, but more often and loudly in the acts of
      his life. He was austere with himself; drank gin when he was alone, to mortify a taste for vintages; and though he enjoyed the theatre, had not crossed the doors of one for twenty years. But he had an approved tolerance for others; sometimes wondering,
      almost with envy, at the high pressure of spirits involved in their misdeeds; and in any extremity inclined to help rather than to reprove. I incline to Cain's heresy, he used to say quaintly: I let my brother go to the devil in his own way. In
      this character it was frequently his fortune to be the last reputable acquaintance and the last good influence in the lives of down-going men. And to such as these, so long as they came about his chambers, he never marked a shade of change in his
      demeanour.
    </p>

  </div>
</div>

Answer 1

这只是一个如何解决问题的想法。我认为还有更多。您需要进行一些错误检查。但是我没有经过有效测试的 atm。

  $(document).ready(function() {
  function scrollStatus(){
      var offheight = $('.parallax').offset().top; //get height of the image
      if ($(this).scrollTop() >= offheight) {

        $('.parallax').removeClass('fixedAb').addClass('fixedPos'); //use addclass to simplify the add subtract of the position

      } else {
        $('.parallax').removeClass('fixedPos').addClass('fixedAb');
      }
  }
  scrollStatus();
  $(window).on('scroll',function(){
    scrollStatus();
  });

});