这个是悬浮在顶部代码
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是没有重载的概念的,onScroll
会被覆盖掉。
检查作用域,同一作用域会被覆盖