I'm trying to dynamically change the background color of a post on scroll to colors set in post options via an ACF color picker. I was able to source enough code examples to get it working (I thought) when developing locally, but now that I've moved it to a real server, it doesn't function the same way.

Problem: The color changing works on the first post I look at, but when I go to another post, the background color that should be displayed (or changed to) is the same as the first post. The only way to get it to display the correct color is to do a hard refresh.

Test it by viewing these two pages. You'll notice they both have the same color to start at the top of the page as well as at the very bottom when you scroll (color changes again). But doing a hard refresh will change that. (first link should be peach background, second link blue). / /

Here's how I have it set up so far:

JS for color changing on scroll effect:

jQuery(document).ready(function($) {
    
    $(window).scroll(function() {

  var $window = $(window),
      $body = $('body'),
      $panel = $('.panel');

  var scroll = $window.scrollTop() + ($window.height() / 3);
 
  $panel.each(function () {
    var $this = $(this);

    if ($this.position().top <= scroll && $this.position().top + $this.height() > scroll) {
          
      $body.removeClass(function (index, css) {
        return (css.match (/(^|\s)color-\S+/g) || []).join(' ');
      });

      $body.addClass('color-' + $(this).data('color'));
    }
  });    
  
}).scroll();
    
});

It's enqueued like this in my functions.php file:

add_action( 'wp_enqueue_scripts', 'add_my_script' );
function add_my_script() {
    wp_register_script(
       'child-theme-script', 
       get_stylesheet_directory_uri() . '/js/cdscripts.js', 
       array('jquery') 
    );

    wp_enqueue_script('child-theme-script');
}

PHP file to generate custom CSS file:

.color-accent {
  background-color:<?php the_field('accent-color');?> !important;
}
.color-initial {
  background-color:<?php the_field('initial-color');?> !important;
}

Function to convert PHP to CSS and enqueue it:

function generate_options_css() {
    ob_start(); // Capture all output into buffer
    require_once dirname( __FILE__ ) . '/inc/custom-styles.php';
    $css = ob_get_clean(); // Store output in a variable, then flush the buffer
    file_put_contents(dirname( __FILE__ ) . '/inc/custom-styles.css', $css, LOCK_EX); // Save it as a css file
    
    wp_enqueue_style( 'custom-styles', get_stylesheet_directory_uri() . '/inc/custom-styles.css' );
}
add_action( 'wp_enqueue_scripts', 'generate_options_css' );

In the post template, the sections I want to change background colors on when they're scrolled to are assigned the "panel" class and data-color="XXXXXXX" value depending on what color from ACF I want to use.

Is there any other way for me to accomplish this that will force the new CSS values to be loaded for every page/post?

I'm trying to dynamically change the background color of a post on scroll to colors set in post options via an ACF color picker. I was able to source enough code examples to get it working (I thought) when developing locally, but now that I've moved it to a real server, it doesn't function the same way.

Problem: The color changing works on the first post I look at, but when I go to another post, the background color that should be displayed (or changed to) is the same as the first post. The only way to get it to display the correct color is to do a hard refresh.

Test it by viewing these two pages. You'll notice they both have the same color to start at the top of the page as well as at the very bottom when you scroll (color changes again). But doing a hard refresh will change that. (first link should be peach background, second link blue). https://www.conrad-design/dev/cd2020/projects/blush-salon-spa-website-design/ https://www.conrad-design/dev/cd2020/projects/pantel-business-systems-website-design/

Here's how I have it set up so far:

JS for color changing on scroll effect:

jQuery(document).ready(function($) {
    
    $(window).scroll(function() {

  var $window = $(window),
      $body = $('body'),
      $panel = $('.panel');

  var scroll = $window.scrollTop() + ($window.height() / 3);
 
  $panel.each(function () {
    var $this = $(this);

    if ($this.position().top <= scroll && $this.position().top + $this.height() > scroll) {
          
      $body.removeClass(function (index, css) {
        return (css.match (/(^|\s)color-\S+/g) || []).join(' ');
      });

      $body.addClass('color-' + $(this).data('color'));
    }
  });    
  
}).scroll();
    
});

It's enqueued like this in my functions.php file:

add_action( 'wp_enqueue_scripts', 'add_my_script' );
function add_my_script() {
    wp_register_script(
       'child-theme-script', 
       get_stylesheet_directory_uri() . '/js/cdscripts.js', 
       array('jquery') 
    );

    wp_enqueue_script('child-theme-script');
}

PHP file to generate custom CSS file:

.color-accent {
  background-color:<?php the_field('accent-color');?> !important;
}
.color-initial {
  background-color:<?php the_field('initial-color');?> !important;
}

Function to convert PHP to CSS and enqueue it:

function generate_options_css() {
    ob_start(); // Capture all output into buffer
    require_once dirname( __FILE__ ) . '/inc/custom-styles.php';
    $css = ob_get_clean(); // Store output in a variable, then flush the buffer
    file_put_contents(dirname( __FILE__ ) . '/inc/custom-styles.css', $css, LOCK_EX); // Save it as a css file
    
    wp_enqueue_style( 'custom-styles', get_stylesheet_directory_uri() . '/inc/custom-styles.css' );
}
add_action( 'wp_enqueue_scripts', 'generate_options_css' );

In the post template, the sections I want to change background colors on when they're scrolled to are assigned the "panel" class and data-color="XXXXXXX" value depending on what color from ACF I want to use.

Is there any other way for me to accomplish this that will force the new CSS values to be loaded for every page/post?

• css
• advanced-custom-fields
• wp-enqueue-script
• wp-enqueue-style

• Any chance the server/browser are caching your file? Maybe try adding a random string as the version into your script enqueuing, so that every time the page loads, you're telling the browser it's a different CSS file and instead of serving a cached version it grabs the newest one that you just generated via the CSS? – Tony Djukic Commented Oct 18, 2020 at 1:42
• Thanks Tony. I didn't have any caching set up on the site (via plugins), cleared the browser cache, and turned off Cloudflare on the domain, and the CSS file still didn't update without a hard refresh. So I was a bit perplexed. But adding the random string seems to have done the trick. Thank you for the suggestion! – rconrad41 Commented Oct 18, 2020 at 15:24
• I’ve noticed that sometimes, despite what I want, the server itself and even my browsers will still cache files, especially if I’m just fine tuning a production site rather than working on the early stages of a new project. It’s all part of how things are configured to make browsing faster and it’s not always obvious that it’s happening. With regards to caching plugins I’ve found them to be largely ineffectual. Using a host like FlyWheel that really sets servers up well is far more effective. But then you also sometimes need cache busting solutions like yours. Glad it’s fixed.