JavaScript Fixed Masthead for Spotfire

Introduction

Having a fixed masthead on your analysis can greatly enhance the user experience. A masthead is the area at the top of a website that typically contains a logo, navigation menu, and other important information. By fixing this masthead to the top of the screen as the user scrolls, it becomes a constant reference point for users and provides a number of benefits.

A fixed masthead allows users to quickly and easily navigate through the analysis without having to scroll back to the top of the page each time they want to access the menu. This saves time and makes the experience more seamless. Having a fixed masthead is a simple but effective way to improve the user experience on your analysis by providing easy navigation and creates a more engaging and user-friendly experience.

FixedMasthead.js

//sript params
fixedElementSelector = "#masthead"

//remember starting position
fixedElement = document.querySelector(fixedElementSelector);
fixedElementRect = fixedElement.getBoundingClientRect();
fixedElement.style.top = fixedElementRect.y+"px";
fixedElement.style.left = fixedElementRect.x+"px";
fixedElement.style.width = fixedElementRect.width+"px";
fixedElement.style.height = fixedElementRect.height+"px";
initialPosition = fixedElement.style.position;

//scrollable elements
elementsWithOverflowStyle = document.querySelectorAll('[style*="overflow"]');

//update position
function setFixedPosition(overflowElement){
  fixedElement.style.position = overflowElement.scrollTop>0?"fixed":initialPosition;
}

elementsWithOverflowStyle.forEach(overflowElement => {
    overflowElement.addEventListener('scroll', ()=>setFixedPosition(overflowElement));
});

◄ Back to JavaScript Masthead for TIBCO Spotfire