0

我有一个元素的背景图像比屏幕的高度高一点。当用户向下滚动时，我希望图像向上滚动，直到图像底部与窗口底部齐平，然后冻结图像，然后允许文本在图像顶部滚动。

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

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

4

1 回答 1

0

这只是如何解决问题的想法。我认为还有更多。你需要做一些错误检查。但我没有这个经过有效测试的自动取款机。

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

});
于 2018-02-06T18:38:23.980 回答