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