如何让图像向左浮动，文本向右浮动？

Question

我目前正在开发一个项目，我设置了一个背景图像，以便在用户滚动时移动，使用位置

move1

、

move2

和

move3

。但是，我现在尝试调整布局，使文本 (

topPanel

) 移动到右侧而不是停留在顶部，同时还将背景图像移动到左侧。我尝试使用网格布局来实现此目的，但它似乎导致背景图像完全停止移动。我不确定为了解决此问题我可能会缺少哪些步骤。你能提供一些指导吗？谢谢你。

$(document).ready(function() {
  var winHeight = $(".topPanel").height(),
    topLimit = winHeight;

  $(".topPanel").on("scroll", function() {
    $(".feature").each(function() {
      var thisTop = $(this).offset().top - $(window).scrollTop();

      if (thisTop <= topLimit) {
        $(".feature").removeClass("highlight");
        $(this).addClass("highlight");

        if ($(this).hasClass("feature1")) {
          $("body").addClass("move1");
        }
        if ($(this).hasClass("feature2")) {
          $("body").addClass("move2");
        }
        if ($(this).hasClass("feature3")) {
          $("body").addClass("move3");
        }
      }
    });
  });
});

.topPanel {
  height: 50vh;
  overflow: auto;
  float: left;
  padding: 10px;
  position: relative;
  z-index: 1;
}

body:after {
  content: "";
  z-index: -1;
  position: fixed;
  float: right;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: url(http://www.reedyrace.com/images/b64d-chassis.jpg) no-repeat 50% 0%;
  transition: background 1s ease;
}

.inner {
  max-width: 1280px;
  margin: auto;
}

.highlight {
  background: red;
}

.move1:after {
  background-position: 0% 50%;
}

.move2:after {
  background-position: 0% 100%;
}

.move3:after {
  background-position: 100% 50%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div class="topPanel">
  <div class="inner">
    <p>Scroll to see feature titles</p>
    <p>Scroll to see feature titles</p>
    <p>Scroll to see feature titles</p>
    <p>Scroll to see feature titles</p>
    <p>Scroll to see feature titles</p>
    <p>Scroll to see feature titles</p>

    <h2 class="feature feature1" id="title1">Feature 1</h2>
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
      takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
      et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
      At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore
      et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
      sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </p>

    <h2 class="feature feature2" id="myDiv">Feature 2</h2>
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
      takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
      et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
      At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>

    <h2 class="feature feature3" id="title3">Feature 3</h2>
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
      takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
      et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
      At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
  </div>
</div>

Answer 1

尝试以下编辑：

if ($(this).hasClass("feature1")) {
  $("body").removeClass("move2 move3").addClass("move1");
} else if ($(this).hasClass("feature2")) {
  $("body").removeClass("move1 move3").addClass("move2");
} else if ($(this).hasClass("feature3")) {
  $("body").removeClass("move1 move2").addClass("move3");
}

.topPanel {
  float: right; /* Adjusted to move text to the right */
}

.move2:after {
  background-position: 0% 0%; /* Adjusted to move background image to the left */
}

让我知道这是否有效:)