изменить фоновое изображение при прокрутке

Я хочу создать эффект фонового изображения, который будет изменять изображение, когда пользователь прокручивает страницу. У меня возникла проблема с URL изображений, как я могу это исправить? Как я могу связать URL изображения в jQuery с страницы WordPress?

Вот код. URL неверный, и я не могу понять, как правильно его связать из скрипта js.

$(window).scroll(function(e){
    e.preventDefault();
    var scrollPos = $(window).scrollTop();
      if(scrollPos >= 100){
        $('#portfolio-cover').css({'backgroundImage':'url("assets/img/top-page2.jpg")'});
      }
      else if(scrollPos >= 120){
        $('#portfolio-cover').css({'backgroundImage':'url("assets/img/top-page3.jpg")'});
      }
      else if(scrollPos >= 150){
        $('#portfolio-cover').css({'backgroundImage':'url("assets/img/top-page4.jpg")'});
      }
      else{
        $('#portfolio-cover').css({'backgroundImage':'url("assets/img/top-page1.jpg")'});
      }
  });

Предполагая, что папка с ресурсами находится в каталоге вашей темы, вам нужно передать каталог темы, который вы можете получить с помощью PHP, в ваш JavaScript. (Если это плагин и папка с ресурсами находится в каталоге вашего плагина, будет работать аналогичный подход, но точный код будет отличаться.)

В WordPress с помощью PHP вы можете найти каталог стилей, который является корневым каталогом вашей темы (даже если вы используете дочернюю тему).

$theme_dir = wp_get_stylesheet_directory_uri();

Это сохранит нечто подобное http://www.domain.com/wp-content/themes/yourtheme/

Если ваш JavaScript находится прямо в вашем шаблоне страницы

Вы можете просто напрямую написать каталог PHP темы в ваш JavaScript в момент, когда вы его получаете:

$(window).scroll(function(e){
    e.preventDefault();
    var scrollPos = $(window).scrollTop();
      if(scrollPos >= 100){
        $('#portfolio-cover').css({'backgroundImage':'url("<?php echo get_stylesheet_directory_uri(); ?>/assets/img/top-page2.jpg")'});
      }

Это не лучший подход, потому что один язык внедряет себя в другой, и это также означает, что ваш JavaScript находится в вашем шаблоне страницы, что менее удобно и менее чисто.

Если ваш JavaScript в отдельном файле

Если ваш JavaScript находится в отдельном файле, например background-scroll.js, вы должны сначала правильно загрузить его с помощью системы подключения WordPress. Затем вы можете передать переменную (например, каталог вашей темы) в него.

Вы будете использовать переменную $theme_dir, которую мы только что создали.

function wpse_329739_enqueue_scripts(){

    $theme_dir = get_stylesheet_directory_uri();

    wp_enqueue_script( 'background-scroll', $theme_dir . "/assets/js/background-scroll.js" );

}
add_action( 'wp_enqueue_scripts', 'wpse_329739_enqueue_scripts' );

Последний шаг – передать переменную, которую мы создали, чтобы ваш скрипт мог ее использовать. Для этого мы передаем массив переменных через функцию localize_script, даже если это всего лишь одна переменная.

Наш код становится таким:

function wpse_329739_enqueue_scripts(){

    $theme_dir = get_stylesheet_directory_uri();

    $variables = array(
        "theme_dir" => $theme_dir
    );

    wp_enqueue_script( 'background-scroll', $theme_dir . "/assets/js/background-scroll.js" );
    
    wp_localize_script( 'background-scroll', 'PHPVARS', $variables );

}
add_action( 'wp_enqueue_scripts', 'wpse_329739_enqueue_scripts' );

Таким образом, мы обернули переменную (имя каталога темы) в массив и затем сказали WordPress передать ее как объект JavaScript нашему скрипту.

В нашем скрипте мы можем получить к ней доступ по имени, которое мы указали (PHPVARS), т.е. PHPVARS.theme_dir.

$(window).scroll(function(e){
    e.preventDefault();
    var scrollPos = $(window).scrollTop();
      if(scrollPos >= 100){
        $('#portfolio-cover').css({'backgroundImage':'url("' + PHPVARS.theme_dir + '/assets/img/top-page2.jpg")'});
      }

Ваш код не будет работать из-за неправильных условий if. Как сейчас, если scrollPos установлен на, скажем, 200, первое условие, scrollPos >= 100 будет истинным, поэтому код не достигнет других случаев. Чтобы это работало, вам нужно установить верхние пределы для значений scrollPos:

$(window).scroll(function(e){
    e.preventDefault();
    var scrollPos = $(window).scrollTop();
      if(scrollPos >= 100 && scrollPos < 120){
        $('#portfolio-cover').css({'backgroundImage':'url("assets/img/top-page2.jpg")'});
      }
      else if(scrollPos >= 120 && scrollPos < 150){
        $('#portfolio-cover').css({'backgroundImage':'url("assets/img/top-page3.jpg")'});
      }
      else if(scrollPos >= 150){
        $('#portfolio-cover').css({'backgroundImage':'url("assets/img/top-page4.jpg")'});
      }
      else{
        $('#portfolio-cover').css({'backgroundImage':'url("assets/img/top-page1.jpg")'});
      }
  });