Heading Highlighting Floating Widget – Boost User Engagement and Navigation

Creating a floating widget for your website can be a great way to engage users and provide them with easy access to important sections of your website.

In this tutorial, we will show you how to create a floating widget using JavaScript, CSS, and HTML that highlights the active heading as the user scrolls, and smoothly scrolls the widget to the active heading. We will also show you how to make the widget responsive so that it is only visible on large screens.

HTML

First, we will create the HTML structure of the floating widget. The widget will consist of a div element with an id of “floating-widget” and an unordered list element with an id of “floating-widget-headings”. The unordered list element will be used to display the headings of the webpage.

<div id="floating-widget">
  <ul id="floating-widget-headings"></ul>
</div>

<div id="main-content">
  <h1>Heading 1</h1>
  <p>Content...</p>
  <h2>Heading 2</h2>
  <p>Content...</p>
  <h3>Heading 3</h3>
  <p>Content...</p>
  <h4>Heading 4</h4>
  <p>Content...</p>
  <h5>Heading 5</h5>
  <p>Content...</p>
  <h6>Heading 6</h6>
  <p>Content...</p>
</div>

JavaScript

Next, we will use JavaScript to add the headings of the webpage to the widget and highlight the active heading as the user scrolls. We will use the DOMContentLoaded event to ensure that the JavaScript is executed only after the page has finished loading.

Inside the event listener, we will use the querySelectorAll method to get all the headings on the page and the forEach method to loop through them. Then we will create a new list item element and use the appendChild method to add a cloned copy of the heading element to it.

Finally, we will use the appendChild method to add the list item to the floating widget.

document.addEventListener("DOMContentLoaded", function () {
  // Get all headings on the page
  var headings = document.querySelectorAll("h1, h2, h3, h4, h5, h6");
  var currentHeading;
  var floatingWidgetHeadings = document.getElementById(
    "floating-widget-headings"
  );

  // Add all headings to the floating widget
  headings.forEach(function (heading) {
    var listItem = document.createElement("li");
    listItem.appendChild(heading.cloneNode(true));
    floatingWidgetHeadings.appendChild(listItem);
  });

  // When the user scrolls
  window.onscroll = function () {
    // Get the current scroll position
    var scrollTop = window.pageYOffset;

    // Iterate through all headings
    headings.forEach(function (heading) {
      // Get the heading's top position
      var headingTop = heading.getBoundingClientRect().top + scrollTop;

      // If the heading is in focus (within 50px of the top of the viewport)
      if (headingTop <= scrollTop + 50) {
        // Update the current heading in focus
        currentHeading = heading;
      }
    });

    // Remove the active class from all headings in the floating widget
    var activeHeading = document.querySelector(
      "#floating-widget-headings li.active"
    );
    if (activeHeading) {
      activeHeading.classList.remove("active");
    }

    // Add the active class to the current heading in focus
    // Add the active class to the current heading in focus
    var currentHeadingIndex = Array.prototype.indexOf.call(
      headings,
      currentHeading
    );
    floatingWidgetHeadings.childNodes[currentHeadingIndex].classList.add(
      "active"
    );

    // Scroll the floating widget to the active list item
    var activeItem = document.querySelector(
      "#floating-widget-headings li.active"
    );
    activeItem.scrollIntoView({
      behavior: "smooth", // scroll smoothly to the active list item
      block: "center", // align the element to the center of the container
    });
  };
});

In this JavaScript code, after adding the active class to the current heading in focus, we’ve used the querySelector method to select the active list item and used the scrollIntoView method to scroll the floating widget to the active list item. The scrollIntoView method is used to scroll the element into the visible area of the browser window. The behavior property is set to “smooth” to scroll smoothly to the active list item, and the block property is set to “center” so the active list item will be aligned to the center of the container when it is scrolled.

 

CSS

Finally, we will use CSS to style the widget and make it responsive. We will use CSS media queries to show the widget only when the screen width is greater than 1024 pixels.

#floating-widget {
  position: fixed;
  bottom: 0;
  right: 0;
  background-color: #f5f5f5;
  padding: 10px;
  z-index: 999;
  max-height: 80vh; /* adjust as per your requirement */
  overflow-y: auto;
}

#floating-widget-headings li {
  list-style: none;
  margin: 0;
  transition: transform 0.2s ease-in-out;
}

#floating-widget-headings li.active {
  font-weight: bold;
  transform: scale(1.2);
}

#floating-widget-headings li h1 {
  font-size: 36px;
}

#floating-widget-headings li h2 {
  font-size: 30px;
}

#floating-widget-headings li h3 {
  font-size: 24px;
}

#floating-widget-headings li h4 {
  font-size: 18px;
}

#floating-widget-headings li h5 {
  font-size: 14px;
}

#floating-widget-headings li h6 {
  font-size: 12px;
}

In this CSS, we’ve used a media query to check the screen width and set the display property of the #floating-widget element to block when the screen width is greater than 1024 pixels. By default, the widget is set to display: none so it will not be visible initially. We’ve also set position: fixed, bottom: 0, right: 0, background-color, padding, z-index, max-height, and overflow-y properties to the widget.

How to use Floating Heading Widget in WordPress?

In order to use this floating widget functionality in WordPress, you will need to add the HTML, JavaScript, and CSS code to your website. Here are the steps you can follow:

1. Create a new plugin or a child theme in your WordPress website.
2. In your plugin or child theme, create a new PHP file and name it something like “floating-widget.php”.
3. In the “floating-widget.php” file, paste the HTML code for the floating widget.
4. Create a new JavaScript file and name it something like “floating-widget.js”.
5. In the “floating-widget.js” file, paste the JavaScript code for the floating widget.
6. Create a new CSS file and name it something like “floating-widget.css”.
7. In the “floating-widget.css” file, paste the CSS code for the floating widget.
8. In the “floating-widget.php” file, use the wp_enqueue_script and wp_enqueue_style functions to enqueue the JavaScript and CSS files respectively.
9. Finally, activate the plugin or child theme in your WordPress website.

Alternatively, you can use the wp_add_inline_script and wp_add_inline_style functions to add the JavaScript and CSS code directly in the PHP file, respectively.

This way, the floating widget will be added to your WordPress website and will be functional on all pages of your website. You can modify the CSS as per your theme design and can add the widget to specific pages using wordpress conditions.