How to run multiple functions in JQuery?-CodePudding

Have two functions in my index.php file, they work fine, but will only execute the last one. They work fine when one is commented out or the order is swapped, my question is how can I get them to both run if this is possible.

// ************************* Scroll Up Button *************************
    // Get the button
    var mybutton = document.getElementById("scrollTopBtn");

    // When the user scrolls down 20px from the top of the document, show the button
    window.onscroll = function() {scrollFunction()
            console.log('Scroll To Top Button');
    };

    function scrollFunction() {
            if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
            scrollTopBtn.style.display = "block";
            } else {
            scrollTopBtn.style.display = "none";
            }
    }

    // When the user clicks on the button, scroll to the top of the document
    function topFunction() {
            document.body.scrollTop = 0;
            document.documentElement.scrollTop = 0;
    }

    // ********************** Sticky navbar **********************************
    window.onscroll = function() {stickyHeaderScroll()};

    var header = document.getElementById("navBack");
    var sticky = header.offsetTop;

    function stickyHeaderScroll() {
        if (window.pageYOffset > sticky) {
            header.classList.add("sticky");
        } else {
            header.classList.remove("sticky");
        }
    }

For the example above the navbar will remain sticky but the scroll to top button won't appear, if I swap the code then scroll button will appear and work but navbar won't remain sticky. I've tried adding the sticky navbar code into the navbar.php, but still get the same problem.

I know I'm missing something really obvious here, but the other answers I've looked at don't seem to work.

CodePudding user response：

You can add both function at once

// ************************* Scroll Up Button *************************
    // Get the button
    var mybutton = document.getElementById("scrollTopBtn");


    function scrollFunction() {
            if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
            mybutton.style.display = "block"; // here was used worng object
            } else {
            mybutton.style.display = "none";
            }
    }

    // When the user clicks on the button, scroll to the top of the document
    function topFunction() {
            document.body.scrollTop = 0;
            document.documentElement.scrollTop = 0;
    }

    // ********************** Sticky navbar **********************************
    var header = document.getElementById("navBack");
    var sticky = header.offsetTop;

    function stickyHeaderScroll() {
        if (window.pageYOffset > sticky) {
            header.classList.add("sticky");
        } else {
            header.classList.remove("sticky");
        }
    }

    // When the user scrolls down 20px from the top of the document, show the button 
     window.onscroll = function() {
    if(typeof scrollFunction === "function") {
        scrollFunction();
    }
    if(typeof stickyHeaderScroll=== "function") {
        stickyHeaderScroll();
    }
    console.log('Scroll To Top Button');
};

or use window.addEventListener('scroll', functionName)

window.addEventListener('scroll', scrollFunction);
window.addEventListener('scroll', stickyHeaderScroll);