如何在JQuery中運行多個函式？

在我的 index.php 檔案中有兩個函式，它們作業正常，但只會執行最后一個。當一個被注釋掉或訂單被交換時，它們作業正常，我的問題是，如果可能的話，我怎樣才能讓它們同時運行。

// ************************* 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");
        }
    }

對于上面的示例，導航欄將保持粘性，但不會出現滾動到頂部按鈕，如果我交換代碼，則滾動按鈕將出現并作業，但導航欄不會保持粘性。我嘗試將粘性導航欄代碼添加到 navbar.php 中，但仍然遇到同樣的問題。

我知道我在這里遺漏了一些非常明顯的東西，但是我看過的其他答案似乎不起作用。

uj5u.com熱心網友回復：

您可以同時添加這兩個功能

// ************************* 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');
};

或使用window.addEventListener('scroll', functionName)

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

標籤：phphtmljQuery

上一篇：Laravel索引-未定義屬性：Illuminate\Pagination\LengthAwarePaginator::$links

下一篇：在Laravel中連接具有多行的表