UX Design | Visual Design | Audio Design

Enhancing Voxel Smooth Scroll with Sticky Header




In this quick guide, I’ll show you how to enhance the Voxel smooth scroll feature in your Voxel-based WordPress website. By adding a custom function, you can make the scroll action account for your sticky header. We’ll keep it simple: all you need is to assign a specific class to your scroll action element and know the class of your sticky header. Let’s get started!


  • Ensure you have Voxel Child Theme Installed
  • Familiarity with HTML and JavaScript
  • Make backups of your site before you apply any changes!

Identifying Your Elements

  • Start by giving your scroll action element a class name. For example, we’ll call it “enhanced-scroll“.
  • Identify the class of your sticky header, let’s call it “sticky-header-bar“.

Creating a Custom Function

Now, you just need to add a custom JavaScript function to your WordPress site. You can do that by adding the following code to your functions.php file in your child theme folder, or by using a tool like WPcode to add the snippet to a specific location. Here’s the code:

jQuery(document).ready(function($) {
    // Add your custom JavaScript code here
    $('.enhanced-scroll').on('click', function(event) {

        // Get the section ID from the clicked element's ID
        var sectionID = $(this).attr('id');

        // Calculate the offset accounting for the sticky header height
        var headerHeight = $('.sticky-header-bar').outerHeight();
        var offset = $('#' + sectionID).offset().top - headerHeight;

        // Scroll to the section with the calculated offset
        $('html, body').animate({
            scrollTop: offset
        }, 'slow');


Elevate the user experience on your Voxel-powered WordPress website by implementing this enhanced smooth scroll feature. With just two simple steps – adding a class to your scroll action element and identifying your sticky header class – you can make your website’s navigation even more user-friendly.

Whether you choose to directly incorporate the code into your child theme’s functions file or utilize WPCode for a streamlined process, the result is a more interactive and user-friendly website.

Don’t forget to put your changes to the test and create backups to ensure a seamless implementation. Happy scrolling, now with the added touch of sticky header brilliance! Let me know if anything is not working as expected and we can figure it out together 🙂

If you do not have Voxel yet, you can support me by getting it through this link: Get Voxel

And check out my other Voxel related blog posts!

If you like my tutorials and snippets, and want to motivate me, or just say thanks,
feel free to support me by buying me a tea (as I do not drink coffee) :)

This website may contain affiliate links. If you click on a link and make a purchase, I may earn a small commission at no additional cost to you. This helps support the time and effort put into maintaining this website. I only recommend products and services I genuinely believe will be helpful to you. Thank you for your support!