javascript - js悬浮代码有冲突

问题描述

问 题

• 这个是悬浮在顶部代码

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

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

解决方案

换个函数名字就行了；

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

这篇关于javascript - js悬浮代码有冲突的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！