背景图像与滚动内容一起移动

Question

我在网站上的jquery代码有问题，我有wordpress。 这是我的小提琴：

$('.test1').scroll(function() {
  var x = $(this).scrollTop();
  $(this).css('background-position', '0% ' + parseInt(-x / 10) + 'px');
});

.test1 {
  width: 100%;
  height: 100%;
  background: #fff url(http://imgie.pl/images/2017/10/11/pieczatki-w-tlev2c3b6c.png) no-repeat fixed center center;
}

<div class="test1">
  <p>Lorem ipsum dolor sit amet tempor varius, scelerisque a, bibendum scelerisque pede turpis sed est. Aliquam eleifend mi, ut orci sit amet, purus. Class aptent taciti sociosqu ad litora torquent per inceptos hymenaeos. Pellentesque habitant morbi tristique
    eget, faucibus eros lacus, congue ut, consequat auctor auctor odio. Aliquam orci. Cum sociis natoque penatibus et malesuada enim non magna. Aliquam erat urna, id sollicitudin magna. Vestibulum ante sit amet, vestibulum ipsum. Morbi tincidunt. Fusce
    condimentum sem vel purus. Pellentesque vel purus. Phasellus vitae metus. Curabitur blandit egestas purus. Aenean ligula quis wisi. Mauris vitae arcu nec pede. Morbi nibh justo, eget est. Pellentesque mattis lorem non enim. Etiam non odio. Etiam rutrum.
    Nunc arcu erat lacus, congue sit amet ligula. Suspendisse justo nibh, mollis faucibus, convallis tellus. Integer sollicitudin quis, tellus. Aenean nulla orci quis sem. Pellentesque egestas ac, augue. Vestibulum sollicitudin. Donec lectus dapibus nisl.
    Nam sed est dolor, scelerisque iaculis. Pellentesque laoreet condimentum, urna ut justo quis venenatis eu, pulvinar ligula, nonummy at, suscipit ultricies, velit eleifend et, tincidunt consequat, orci ultricies libero laoreet ante in erat ac dolor.
  </p>
  Lorem ipsum dolor sit amet tempor varius, scelerisque a, bibendum scelerisque pede turpis sed est. Aliquam eleifend mi, ut orci sit amet, purus. Class aptent taciti sociosqu ad litora torquent per inceptos hymenaeos. Pellentesque habitant morbi tristique
  eget, faucibus eros lacus, congue ut, consequat auctor auctor odio. Aliquam orci. Cum sociis natoque penatibus et malesuada enim non magna. Aliquam erat urna, id sollicitudin magna. Vestibulum ante sit amet, vestibulum ipsum. Morbi tincidunt. Fusce
  condimentum sem vel purus. Pellentesque vel purus. Phasellus vitae metus. Curabitur blandit egestas purus. Aenean ligula quis wisi. Mauris vitae arcu nec pede. Morbi nibh justo, eget est. Pellentesque mattis lorem non enim. Etiam non odio. Etiam rutrum.
  Nunc arcu erat lacus, congue sit amet ligula. Suspendisse justo nibh, mollis faucibus, convallis tellus. Integer sollicitudin quis, tellus. Aenean nulla orci quis sem. Pellentesque egestas ac, augue. Vestibulum sollicitudin. Donec lectus dapibus nisl.
  Nam sed est dolor, scelerisque iaculis. Pellentesque laoreet condimentum, urna ut justo quis venenatis eu, pulvinar ligula, nonummy at, suscipit ultricies, velit eleifend et, tincidunt consequat, orci ultricies libero laoreet ante in erat ac dolor.
  <p>Lorem ipsum dolor sit amet tempor varius, scelerisque a, bibendum scelerisque pede turpis sed est. Aliquam eleifend mi, ut orci sit amet, purus. Class aptent taciti sociosqu ad litora torquent per inceptos hymenaeos. Pellentesque habitant morbi tristique
    eget, faucibus eros lacus, congue ut, consequat auctor auctor odio. Aliquam orci. Cum sociis natoque penatibus et malesuada enim non magna. Aliquam erat urna, id sollicitudin magna. Vestibulum ante sit amet, vestibulum ipsum. Morbi tincidunt. Fusce
    condimentum sem vel purus. Pellentesque vel purus. Phasellus vitae metus. Curabitur blandit egestas purus. Aenean ligula quis wisi. Mauris vitae arcu nec pede. Morbi nibh justo, eget est. Pellentesque mattis lorem non enim. Etiam non odio. Etiam rutrum.
    Nunc arcu erat lacus, congue sit amet ligula. Suspendisse justo nibh, mollis faucibus, convallis tellus. Integer sollicitudin quis, tellus. Aenean nulla orci quis sem. Pellentesque egestas ac, augue. Vestibulum sollicitudin. Donec lectus dapibus nisl.
    Nam sed est dolor, scelerisque iaculis. Pellentesque laoreet condimentum, urna ut justo quis venenatis eu, pulvinar ligula, nonummy at, suscipit ultricies, velit eleifend et, tincidunt consequat, orci ultricies libero laoreet ante in erat ac dolor.
  </p>
  Lorem ipsum dolor sit amet tempor varius, scelerisque a, bibendum scelerisque pede turpis sed est. Aliquam eleifend mi, ut orci sit amet, purus. Class aptent taciti sociosqu ad litora torquent per inceptos hymenaeos. Pellentesque habitant morbi tristique
  eget, faucibus eros lacus, congue ut, consequat auctor auctor odio. Aliquam orci. Cum sociis natoque penatibus et malesuada enim non magna. Aliquam erat urna, id sollicitudin magna. Vestibulum ante sit amet, vestibulum ipsum. Morbi tincidunt. Fusce
  condimentum sem vel purus. Pellentesque vel purus. Phasellus vitae metus. Curabitur blandit egestas purus. Aenean ligula quis wisi. Mauris vitae arcu nec pede. Morbi nibh justo, eget est. Pellentesque mattis lorem non enim. Etiam non odio. Etiam rutrum.
  Nunc arcu erat lacus, congue sit amet ligula. Suspendisse justo nibh, mollis faucibus, convallis tellus. Integer sollicitudin quis, tellus. Aenean nulla orci quis sem. Pellentesque egestas ac, augue. Vestibulum sollicitudin. Donec lectus dapibus nisl.
  Nam sed est dolor, scelerisque iaculis. Pellentesque laoreet condimentum, urna ut justo quis venenatis eu, pulvinar ligula, nonummy at, suscipit ultricies, velit eleifend et, tincidunt consequat, orci ultricies libero laoreet ante in erat ac dolor.
  <p>Lorem ipsum dolor sit amet tempor varius, scelerisque a, bibendum scelerisque pede turpis sed est. Aliquam eleifend mi, ut orci sit amet, purus. Class aptent taciti sociosqu ad litora torquent per inceptos hymenaeos. Pellentesque habitant morbi tristique
    eget, faucibus eros lacus, congue ut, consequat auctor auctor odio. Aliquam orci. Cum sociis natoque penatibus et malesuada enim non magna. Aliquam erat urna, id sollicitudin magna. Vestibulum ante sit amet, vestibulum ipsum. Morbi tincidunt. Fusce
    condimentum sem vel purus. Pellentesque vel purus. Phasellus vitae metus. Curabitur blandit egestas purus. Aenean ligula quis wisi. Mauris vitae arcu nec pede. Morbi nibh justo, eget est. Pellentesque mattis lorem non enim. Etiam non odio. Etiam rutrum.
    Nunc arcu erat lacus, congue sit amet ligula. Suspendisse justo nibh, mollis faucibus, convallis tellus. Integer sollicitudin quis, tellus. Aenean nulla orci quis sem. Pellentesque egestas ac, augue. Vestibulum sollicitudin. Donec lectus dapibus nisl.
    Nam sed est dolor, scelerisque iaculis. Pellentesque laoreet condimentum, urna ut justo quis venenatis eu, pulvinar ligula, nonummy at, suscipit ultricies, velit eleifend et, tincidunt consequat, orci ultricies libero laoreet ante in erat ac dolor.
  </p>
  Lorem ipsum dolor sit amet tempor varius, scelerisque a, bibendum scelerisque pede turpis sed est. Aliquam eleifend mi, ut orci sit amet, purus. Class aptent taciti sociosqu ad litora torquent per inceptos hymenaeos. Pellentesque habitant morbi tristique
  eget, faucibus eros lacus, congue ut, consequat auctor auctor odio. Aliquam orci. Cum sociis natoque penatibus et malesuada enim non magna. Aliquam erat urna, id sollicitudin magna. Vestibulum ante sit amet, vestibulum ipsum. Morbi tincidunt. Fusce
  condimentum sem vel purus. Pellentesque vel purus. Phasellus vitae metus. Curabitur blandit egestas purus. Aenean ligula quis wisi. Mauris vitae arcu nec pede. Morbi nibh justo, eget est. Pellentesque mattis lorem non enim. Etiam non odio. Etiam rutrum.
  Nunc arcu erat lacus, congue sit amet ligula. Suspendisse justo nibh, mollis faucibus, convallis tellus. Integer sollicitudin quis, tellus. Aenean nulla orci quis sem. Pellentesque egestas ac, augue. Vestibulum sollicitudin. Donec lectus dapibus nisl.
  Nam sed est dolor, scelerisque iaculis. Pellentesque laoreet condimentum, urna ut justo quis venenatis eu, pulvinar ligula, nonummy at, suscipit ultricies, velit eleifend et, tincidunt consequat, orci ultricies libero laoreet ante in erat ac dolor.
  <p>Lorem ipsum dolor sit amet tempor varius, scelerisque a, bibendum scelerisque pede turpis sed est. Aliquam eleifend mi, ut orci sit amet, purus. Class aptent taciti sociosqu ad litora torquent per inceptos hymenaeos. Pellentesque habitant morbi tristique
    eget, faucibus eros lacus, congue ut, consequat auctor auctor odio. Aliquam orci. Cum sociis natoque penatibus et malesuada enim non magna. Aliquam erat urna, id sollicitudin magna. Vestibulum ante sit amet, vestibulum ipsum. Morbi tincidunt. Fusce
    condimentum sem vel purus. Pellentesque vel purus. Phasellus vitae metus. Curabitur blandit egestas purus. Aenean ligula quis wisi. Mauris vitae arcu nec pede. Morbi nibh justo, eget est. Pellentesque mattis lorem non enim. Etiam non odio. Etiam rutrum.
    Nunc arcu erat lacus, congue sit amet ligula. Suspendisse justo nibh, mollis faucibus, convallis tellus. Integer sollicitudin quis, tellus. Aenean nulla orci quis sem. Pellentesque egestas ac, augue. Vestibulum sollicitudin. Donec lectus dapibus nisl.
    Nam sed est dolor, scelerisque iaculis. Pellentesque laoreet condimentum, urna ut justo quis venenatis eu, pulvinar ligula, nonummy at, suscipit ultricies, velit eleifend et, tincidunt consequat, orci ultricies libero laoreet ante in erat ac dolor.
  </p>
  Lorem ipsum dolor sit amet tempor varius, scelerisque a, bibendum scelerisque pede turpis sed est. Aliquam eleifend mi, ut orci sit amet, purus. Class aptent taciti sociosqu ad litora torquent per inceptos hymenaeos. Pellentesque habitant morbi tristique
  eget, faucibus eros lacus, congue ut, consequat auctor auctor odio. Aliquam orci. Cum sociis natoque penatibus et malesuada enim non magna. Aliquam erat urna, id sollicitudin magna. Vestibulum ante sit amet, vestibulum ipsum. Morbi tincidunt. Fusce
  condimentum sem vel purus. Pellentesque vel purus. Phasellus vitae metus. Curabitur blandit egestas purus. Aenean ligula quis wisi. Mauris vitae arcu nec pede. Morbi nibh justo, eget est. Pellentesque mattis lorem non enim. Etiam non odio. Etiam rutrum.
  Nunc arcu erat lacus, congue sit amet ligula. Suspendisse justo nibh, mollis faucibus, convallis tellus. Integer sollicitudin quis, tellus. Aenean nulla orci quis sem. Pellentesque egestas ac, augue. Vestibulum sollicitudin. Donec lectus dapibus nisl.
  Nam sed est dolor, scelerisque iaculis. Pellentesque laoreet condimentum, urna ut justo quis venenatis eu, pulvinar ligula, nonummy at, suscipit ultricies, velit eleifend et, tincidunt consequat, orci ultricies libero laoreet ante in erat ac dolor.
</div>
<script
  src="https://code.jquery.com/jquery-3.2.1.min.js"
  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
  crossorigin="anonymous"></script>

我已经尝试过将背景图像与scoll上的内容一起移动，但它不起作用。在另一个小提琴这个代码工作完美，但我想在wordpress中这样做，那里的代码不起作用。你可以帮帮我们吗？

Answer 1

根据我的理解，您应该使用CSS而不是JS来实现这一目标：

.test1 {
  width: 100%;
  height: 100%;
  background: #fff url(http://imgie.pl/images/2017/10/11/pieczatki-w-tlev2c3b6c.png);
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
}

background-attachment: fixed是此处的关键

有了这个，你的jquery代码是没用的。