Question

我想首先说一下，当谈到javascript时，我几乎一无所知，只是一点点HTML / CSS。无论如何，我在学校项目的Brackets中打开了一个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>

和

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

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

    function topFunction() {
        document.body.scrollTop = 0;
        document.documentElement.scrollTop = 0;
    }
</script>

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

同样，这两个代码本身都能正常工作，但是当我在html文件中同时使用时，只有一个代码正常工作。

提前谢谢！

Answer 1

只有一个有效的原因是你用第二个作业取代了第一个作业。由于在任何给定时间只有一个函数可以是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')
  }

Answer 2

查看合并后的代码版本，虽然我不知道你在做什么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;
}

Answer 3

每次为其分配功能时，您都会覆盖窗口的滚动事件。有两种解决方案：

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

示例：

var nav = document.getElementById("nav");
var sticky = nav.offsetTop;

function myFunction() {
  if (window.pageYOffset >= sticky) {
    nav.classList.add("sticky")
  } else {
    nav.classList.remove("sticky");
  }
}

function scrollFunction() {
    if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 0) {
        document.getElementById("myBtn").style.display = "block";
    } else {
        document.getElementById("myBtn").style.display = "none";
    }
}

function topFunction() {
    document.body.scrollTop = 0;
    document.documentElement.scrollTop = 0;
}

// Adding each function as a handler to event listener of scroll
window.addEventListener('scroll', myFunction);
window.addEventListener('scroll', topFunction);

2 - 将两个函数合并为一个函数并按照之前的方式进行分配

示例：

var nav = document.getElementById("nav");
var sticky = nav.offsetTop;

function thingsToDoOnScroll() {
	  // First function body
	if (window.pageYOffset >= sticky) {
    nav.classList.add("sticky")
  } else {
    nav.classList.remove("sticky");
  }
  
  // Second function body
  document.body.scrollTop = 0;
  document.documentElement.scrollTop = 0;
  
}

function scrollFunction() {
    if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 0) {
        document.getElementById("myBtn").style.display = "block";
    } else {
        document.getElementById("myBtn").style.display = "none";
    }
}

window.scroll = thingsToDoOnScroll;

使用Brackets，两个<scripts>不能在html文件中一起工作？

3 个答案: