Question

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

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

＆＃13;

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

＆＃13;

.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%;
}

＆＃13;

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

＆＃13;

Answer 1

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

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

});

希望图像向上滚动，然后冻结，然后文本滚动它

1 个答案: