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

Question

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

$('.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 代码就没用了。