Question

我有一个父div。我希望它在向下滚动时向左移动，在向上滚动时向右移动。它内部有一个p标签，我希望在父母移动时p标签保持固定。我写了一些代码，但它根本不起作用。示例代码位于fiddle

var p1 = document.getElementById('parallax1')

function parallaxbubbles() {

  var scrolltop = window.pageYOffset

  var scrollamount = (scrolltop / (scrollheight - windowheight)) * 100

  p1.style.left = 35 + (scrollamount / 3) - 35 + '%'
}
window.addEventListener('scroll', function() {
  requestAnimationFrame(parallaxbubbles)
}, false)

#parallax1 {
  height: 100px;
  width: 2539px;
  top: 300px;
  position: relative;
  background: -webkit-linear-gradient(left top, red, yellow);
  background: -o-linear-gradient(bottom right, red, yellow);
  background: -moz-linear-gradient(bottom right, red, yellow);
  background: linear-gradient(to bottom right, red, yellow);
}

#no1 {
  height: 1000px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="no1">

  <div id="parallax1">
    <h3>This is some text</h3>
    <p>This is some text .</p>
  </div>

</div>

Answer 1

你错过了一些变数。我猜scrollheight是window.scrollY。所以我已经声明了这个变量，当向下滚动时div向左移动，向上滚动时向右移动。

它移动的像素数量和其他自定义样式由您决定。

计算中的一个奇怪的事情就是35 + something - 35。这没用:)。我删除了。

我将文本包装在容器paraContent中，该容器在滚动时从左移动等于parallax1 div向左移动的距离。所以它保持在相同的初始位置

见下文

（我建议您在了解其工作原理以及如何编辑代码之前，不要复制其他来源的代码）

＆＃13;

var p1 = document.getElementById('parallax1')
var p1text = document.querySelector('.paraContent')

function parallaxbubbles() {

  var scrolltop = window.pageYOffset,
    scrollheight = window.scrollY,
    windowheight = window.innerHeight,
    scrollamount = (scrolltop / (scrollheight - windowheight)) * 100

  p1.style.left = (scrollamount / 3) + '%'
  p1text.style.left = -(scrollamount / 3) + '%'
}
window.addEventListener('scroll', function() {
  requestAnimationFrame(parallaxbubbles)
}, false)

＆＃13;

#parallax1 {
  height: 100px;
  width: 2539px;
  top: 300px;
  position: relative;
  background: -webkit-linear-gradient(left top, red, yellow);
  background: -o-linear-gradient(bottom right, red, yellow);
  background: -moz-linear-gradient(bottom right, red, yellow);
  background: linear-gradient(to bottom right, red, yellow);
}

#parallax1 .paraContent {
  position: relative;
  width: 100%;
}

#no1 {
  height: 1000px;
}

＆＃13;

<div id="no1">

  <div id="parallax1">
    <div class="paraContent">


      <h3>This is some text</h3>
      <p>This is some text .</p>
    </div>
  </div>

</div>

＆＃13;

Answer 2

var p1 = $("#parallax1")

function parallaxbubbles() {

  var scrolltop = window.pageYOffset;
  
  var scrollheight = 100;
  
  var windowheight = window.innerHeight;

  var scrollamount = (scrolltop / (scrollheight - windowheight)) * 100;

  p1.css("background-position", scrollamount + "px");
}
window.addEventListener('scroll', function() {
  requestAnimationFrame(parallaxbubbles)
}, false)

#parallax1 {
  height: 100px;
  width: 100%;
  top: 300px;
  position: relative;
  background: -webkit-linear-gradient(left top, red, yellow);
  background: -o-linear-gradient(bottom right, red, yellow);
  background: -moz-linear-gradient(bottom right, red, yellow);
  background: linear-gradient(to bottom right, red, yellow);
}

#no1 {
  height: 1000px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="no1">

  <div id="parallax1">
    <h3>This is some text</h3>
    <p>This is some text .</p>
  </div>

</div>

您有一些未定义的变量。我无法确定scrollheight应该基于什么，但是当您定义缺少的变量（scrollheight和windowheight）时，您将获得所需的结果。

当孩子保持固定时，将div移动到左侧滚动

2 个答案: