jQuery Scroll Header Script

$(window).scroll(function () {
const currentScroll = $(this).scrollTop();

if (currentScroll > lastScrollTop) {
// alert($(this).scrollTop());
// Scrolling down

$('#header-light').css({'background':"#225BC0",'border':'none'});
$('.scroll-logo img').attr('src',"/app/uploads/2024/12/SolarOn-Logo-weiss.svg");

$('.scroll-menu.elementor-widget-nav-menu .elementor-nav-menu–main .elementor-item').addClass("elementor-item-white");
// $('#scroll-header-dark').css('display',"flex");
$(".scroll-button .elementor-button").addClass('elementor-button-secondary-darkbg');
$(".elementor-menu-toggle").addClass('elementor-menu-toggle-scrolldown');
} else {
if (currentScroll === 0) {
// Scrolling up
// $('#header-light').css('display',"flex");
$('#header-light').css('background',"#ffffff");
$('.scroll-logo img').attr('src',"/app/uploads/2024/12/SolarOn-Logo.svg");

$('.scroll-menu.elementor-widget-nav-menu .elementor-nav-menu–main .elementor-item').removeClass("elementor-item-white");
$(".scroll-button .elementor-button").removeClass('elementor-button-secondary-darkbg');
// $('#scroll-header-dark').css('display',"none");
$(".elementor-menu-toggle").removeClass('elementor-menu-toggle-scrolldown');
}
}

lastScrollTop = currentScroll;
});
if ($('.img-acc .accordion').length > 0) {
let currentIndex = 0; // To keep track of the current active li
const liElements = $('.img-acc .accordion ul li'); // Get all li elements
const liElementsa = $('.img-acc .accordion ul li a');
const liElementsamain = $('.img-acc .accordion');
const totalItems = liElements.length;

// Function to update the widths of the li elements
function updateWidths() {
liElements.removeClass('normalhover');
liElements.addClass('normala');
liElements.css('width', '8%'); // Reset all widths to default
liElements.eq(currentIndex).css('width', '100%'); // Increase width of the active li
liElements.eq(currentIndex).removeClass('normala');
liElements.eq(currentIndex).addClass('normalhover');
}

// Initial width setup
updateWidths();

// Left arrow click event
$('.left-arrow').click(function () {
currentIndex = (currentIndex > 0) ? currentIndex – 1 : totalItems – 1; // Move to previous or loop to last
updateWidths();
});

// Right arrow click event
$('.right-arrow').click(function () {
currentIndex = (currentIndex < totalItems – 1) ? currentIndex + 1 : 0; // Move to next or loop to first
updateWidths();
});

// Click event on li elements
liElements.click(function () {
currentIndex = $(this).index(); // Update the index to the clicked element
updateWidths();

// Additional onclick functionality

});
}

});
add above js in wp_footer

### Steps:

1. **Enqueue the Script:**
Add the following code to your `functions.php` file:

function custom_footer_scripts() {
       ?>
       <script>
       jQuery(document).ready(function ($) {
           let lastScrollTop = 0;

           $(window).scroll(function () {
               const currentScroll = $(this).scrollTop();

               if (currentScroll > lastScrollTop) {
                   $('#header-light').css({'background':"#225BC0",'border':'none'});
                   $('.scroll-logo img').attr('src',"/app/uploads/2024/12/SolarOn-Logo-weiss.svg");
                   $('.scroll-menu.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item').addClass("elementor-item-white");
                   $(".scroll-button .elementor-button").addClass('elementor-button-secondary-darkbg');
                   $(".elementor-menu-toggle").addClass('elementor-menu-toggle-scrolldown');    
               } else {
                   if (currentScroll === 0) {
                       $('#header-light').css('background',"#ffffff");
                       $('.scroll-logo img').attr('src',"/app/uploads/2024/12/SolarOn-Logo.svg");
                       $('.scroll-menu.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item').removeClass("elementor-item-white");
                       $(".scroll-button .elementor-button").removeClass('elementor-button-secondary-darkbg');    
                       $(".elementor-menu-toggle").removeClass('elementor-menu-toggle-scrolldown');  
                   }
               }

               lastScrollTop = currentScroll;
           });

           if ($('.img-acc .accordion').length > 0) {
               let currentIndex = 0;
               const liElements = $('.img-acc .accordion ul li');
               const totalItems = liElements.length;

               function updateWidths() {
                   liElements.removeClass('normalhover');
                   liElements.addClass('normala');
                   liElements.css('width', '8%');
                   liElements.eq(currentIndex).css('width', '100%');
                   liElements.eq(currentIndex).removeClass('normala');
                   liElements.eq(currentIndex).addClass('normalhover');
               }

               updateWidths();

               $('.left-arrow').click(function () {
                   currentIndex = (currentIndex > 0) ? currentIndex - 1 : totalItems - 1;
                   updateWidths();
               });

               $('.right-arrow').click(function () {
                   currentIndex = (currentIndex < totalItems - 1) ? currentIndex + 1 : 0;
                   updateWidths();
               });

               liElements.click(function () {
                   currentIndex = $(this).index();
                   updateWidths();
               });
           }
       });
       </script>
       <?php
   }
   add_action('wp_footer', 'custom_footer_scripts');

2. **Explanation of the Code:**
– The script is wrapped inside PHP “ tags and added inline in the `wp_footer` hook.
– The `add_action` function ensures the script is executed in the footer of the website.

3. **Save and Test:**
Save the `functions.php` file and refresh your site to see the script in action.

### Notes:
– Ensure jQuery is loaded in your theme. WordPress includes jQuery by default, but it might not be enqueued in some themes. If not, you can enqueue it with:

function include_jquery() {
       wp_enqueue_script('jquery');
   }
   add_action('wp_enqueue_scripts', 'include_jquery');

– Replace file paths and class names in the JavaScript with the actual ones used on your site if they differ.

Let me know if you need further assistance!