Javascript 使用括号，两个<；脚本>；在html文件中不能一起工作？

首先，我想说我对javascript几乎一无所知，只知道一点HTML/CSS。无论如何，我有一个HTML文件在括号中为一个学校项目打开，我正在使用w3school的两个代码。它们单独工作，但如果我的HTML文件中有两个脚本，那么只有一个可以工作。我想知道怎么解决这个问题

这是我想要的两个不在一起工作的代码

<script>
    window.onscroll = function() {
        myFunction()
    };

    var nav = document.getElementById("nav");
    var sticky = nav.offsetTop;

    function myFunction() {
        if (window.pageYOffset >= sticky) {
            nav.classList.add("sticky")
        } else {
            nav.classList.remove("sticky");
        }
    }
</script>

window.onscroll=函数（）{
myFunction（）
};
var nav=document.getElementById（“nav”）；
var sticky=导航偏移；
函数myFunction（）{
如果（window.pageYOffset>=粘性）{
导航类列表添加（“粘性”）
}否则{
导航类列表。删除（“粘滞”）；
}
}

及

window.onscroll=函数（）{
scrollFunction（）
};
函数滚动函数（）{
如果（document.body.scrollTop>20 | | document.documentElement.scrollTop>0）{
document.getElementById（“myBtn”）.style.display=“block”；
}否则{
document.getElementById（“myBtn”）.style.display=“无”；
}
}
函数topFunction（）{
document.body.scrollTop=0；
document.documentElement.scrollTop=0；
}

我想使用这两个脚本，并让它们一起工作在我的html文件

同样，这两个代码本身都可以正常工作，但是当我的html文件中都有这两个代码时，只有一个代码可以正常工作

---

提前谢谢你

查看代码的合并版本，尽管我不知道您在用

topFunction（）

做什么，但它看起来不在使用中

var nav = document.getElementById("nav");
var sticky = nav.offsetTop;
window.addEventListener('scroll', function () {
    //class list for nav element
    var navClassList = nav.classList;

    //btn
    var myBtn = document.getElementById("myBtn");

    //sticky enable
    var stickyOn = (window.pageYOffset >= sticky);

    if (stickyOn) {
        navClassList.add("sticky")
    } else {
        navClassList.remove("sticky");
    }

    //is button view port
    var isButtonViewPort = (document.body.scrollTop > 20 || document.documentElement.scrollTop > 0);

    if (isButtonViewPort) {
        myBtn.style.display = "block";
    } else {
        myBtn.style.display = "none";
    }
});

function topFunction() {
    document.body.scrollTop = 0;
    document.documentElement.scrollTop = 0;
}

---

查看代码的合并版本，尽管我不知道您在用

topFunction（）

做什么，但它看起来不在使用中

var nav = document.getElementById("nav");
var sticky = nav.offsetTop;
window.addEventListener('scroll', function () {
    //class list for nav element
    var navClassList = nav.classList;

    //btn
    var myBtn = document.getElementById("myBtn");

    //sticky enable
    var stickyOn = (window.pageYOffset >= sticky);

    if (stickyOn) {
        navClassList.add("sticky")
    } else {
        navClassList.remove("sticky");
    }

    //is button view port
    var isButtonViewPort = (document.body.scrollTop > 20 || document.documentElement.scrollTop > 0);

    if (isButtonViewPort) {
        myBtn.style.display = "block";
    } else {
        myBtn.style.display = "none";
    }
});

function topFunction() {
    document.body.scrollTop = 0;
    document.documentElement.scrollTop = 0;
}

---

每次为窗口分配函数时，都会覆盖该窗口的滚动事件。 有两种解决方案：

1-使用addEventListener方法，它添加一个作为第二个参数传递的函数，作为作为作为第一个参数传递的事件的处理程序：

示例：

var nav=document.getElementById（“nav”）；
var sticky=导航偏移；
函数myFunction（）{
如果（window.pageYOffset>=粘性）{
导航类列表添加（“粘性”）
}否则{
导航类列表。删除（“粘滞”）；
}
}
函数滚动函数（）{
如果（document.body.scrollTop>20 | | document.documentElement.scrollTop>0）{
document.getElementById（“myBtn”）.style.display=“block”；
}否则{
document.getElementById（“myBtn”）.style.display=“无”；
}
}
函数topFunction（）{
document.body.scrollTop=0；
document.documentElement.scrollTop=0；
}
//将每个函数作为处理程序添加到scroll的事件侦听器
window.addEventListener（'scroll'，myFunction）；
window.addEventListener（'scroll'，topFunction）每次为窗口分配函数时，都会覆盖该窗口的滚动事件。
有两种解决方案：

1-使用addEventListener方法，它添加一个作为第二个参数传递的函数，作为作为作为第一个参数传递的事件的处理程序：

示例：


var nav=document.getElementById（“nav”）；
var sticky=导航偏移；
函数myFunction（）{
如果（window.pageYOffset>=粘性）{
导航类列表添加（“粘性”）
}否则{
导航类列表。删除（“粘滞”）；
}
}
函数滚动函数（）{
如果（document.body.scrollTop>20 | | document.documentElement.scrollTop>0）{
document.getElementById（“myBtn”）.style.display=“block”；
}否则{
document.getElementById（“myBtn”）.style.display=“无”；
}
}
函数topFunction（）{
document.body.scrollTop=0；
document.documentElement.scrollTop=0；
}
//将每个函数作为处理程序添加到scroll的事件侦听器
window.addEventListener（'scroll'，myFunction）；
window.addEventListener（'scroll'，topFunction）只有一项有效的原因是您正在用第二项任务替换第一项任务。由于在任何给定时间只有一个函数可以作为
window.onscroll
的值，因此第二个赋值将始终覆盖第一个赋值。您可以使用以下内容在浏览器中看到这一点：

document.addEventListener('DOMContentLoaded', function () {
  window.onscroll = function () {
    console.log('ONE')
  }

  window.onscroll = function () {
    console.log('TWO')
  }
})

通过使用
addEventListener
可以在触发事件时调用多个函数：

  window.bindEventListener('scroll', function () {
    console.log('ONE')
  }

  window.bindEventListener('scroll', function () {
    console.log('TWO')
  }

只有一项有效的原因是您正在用第二项任务替换第一项任务。由于在任何给定时间只有一个函数可以作为
window.onscroll
的值，因此第二个赋值将始终覆盖第一个赋值。您可以使用以下内容在浏览器中看到这一点：

document.addEventListener('DOMContentLoaded', function () {
  window.onscroll = function () {
    console.log('ONE')
  }

  window.onscroll = function () {
    console.log('TWO')
  }
})

通过使用
addEventListener
可以在触发事件时调用多个函数：

  window.bindEventListener('scroll', function () {
    console.log('ONE')
  }

  window.bindEventListener('scroll', function () {
    console.log('TWO')
  }

您可以添加HTML吗？您要覆盖滚动事件，请使用
window。addEventListener（“滚动”），而不是window。OnScroll您可以添加HTML吗？您要覆盖滚动事件，请使用
window。addEventListener（“滚动”），而不是window。OnScroll很高兴能提供帮助，请选择正确的答案@Gofish1234还有另一个更好的解决方案：使用addEventListener。您可以稍后从调试器控制台管理和跟踪每个侦听器的触发Yeah@Meghdadhadi我刚刚做了：）很高兴能提供帮助，请选择正确的答案@Gofish1234还有另一个更好的解决方案：使用addEventListener。您可以从调试器控制台管理和跟踪每个侦听器的触发（Yeah@MeghdadHadidi，我刚刚做过：）