Jump to content
  • JavaScript Fixed Masthead for Spotfire

    Makes your masthead always visible when scrolling the page down


    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.




    //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

    User Feedback

    Recommended Comments

    There are no comments to display.

  • Create New...