Sticky Header for Transaction Details

Would be nice if there was an option to make the transaction details header sticky.

Information contained in that header dictates the requirement for many of the "if applicable" items in the checklist. For items further down the list, the auditor either has to scroll back and forth to get to the information, or risk making mistakes by trying to remember the details.

I use GreasMonkey to add the CSS into the app.skyslope.com/TransactionChecklist.aspx?* page when it loads on our auditors machines, but that requires me to keep the code up when you all make changes. Here's the script I use and a gif animation of the outcome for reference.

(function() {
    'use strict';

    function addStickyStyles() {
        const pageContentWrapper = document.querySelector('.page-content-wrapper');
        if (pageContentWrapper) {
            const firstChildDiv = pageContentWrapper.querySelector('div:first-child');
            if (firstChildDiv) {
                const firstChildOfFirstChildDiv = firstChildDiv.querySelector('div:first-child');
                if (firstChildOfFirstChildDiv) {
                    const targetDiv = firstChildOfFirstChildDiv.querySelector('div:first-child');
                    if (targetDiv) {
                        targetDiv.style.position = 'sticky';
                        targetDiv.style.top = '-154px';
                        targetDiv.style.zIndex = '1';
                    }
                }
            }
        }
    }

    // Add styles when the page is fully loaded
    window.addEventListener('load', addStickyStyles);
})();

0 Votes