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);