js悬浮代码有冲突

Question

• 这个是悬浮在顶部代码

     var header = document.querySelector('header');
        var origOffsetY = header.offsetTop;
        function onScroll(e) {
          window.scrollY >= origOffsetY ? header.classList.add('head_fixed') : header.classList.remove('head_fixed');
        }
        document.addEventListener('scroll', onScroll);
     

• 这个是悬浮在底部代码

    var aside = document.querySelector('aside');
    var origOffsetY = aside.offsetTop;
    function onScroll(e) {
      window.scrollY >= origOffsetY ? aside.classList.add('aside_fixed') : aside.classList.remove('aside_fixed');
    }
    document.addEventListener('scroll', onScroll);
    

上面两个代码有些冲突，请问是哪里不对呢？

Answer 1

换个函数名字就行了；

var header = document.querySelector('header');
var origOffsetY = header.offsetTop;
function onScrollHeader(e) {
    window.scrollY >= origOffsetY ? header.classList.add('head_fixed') : header.classList.remove('head_fixed');
}
document.addEventListener('scroll', onScrollHeader);

var aside = document.querySelector('aside');
var origOffsetY = aside.offsetTop;
function onScrollAside(e) {
    window.scrollY >= origOffsetY ? aside.classList.add('aside_fixed') : aside.classList.remove('aside_fixed');
}
document.addEventListener('scroll', onScrollAside);

如果放在一起，可以这样写：

var header = document.querySelector('header');
var aside = document.querySelector('aside');
var origOffsetY = aside.offsetTop;
function onScroll(e) {
    if( window.scrollY >= origOffsetY ){
        header.classList.add('head_fixed')
        aside.classList.add('aside_fixed');
    }else{
        header.classList.remove('head_fixed');
        aside.classList.remove('aside_fixed');
    }
}
document.addEventListener('scroll', onScroll);

Answer 2

两段代码是相同的作用域吗，如果是，那就是函数名冲突了，因为javascript是没有重载的概念的，onScroll会被覆盖掉。

Answer 3

检查作用域，同一作用域会被覆盖