我在有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中执行此操作,因此那部分代码不起作用。你能帮我吗?

最佳答案

根据您对问题的理解,您应该使用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代码就没有用了。

10-07 16:15