今天在电脑端看csdn时,发现文章界面一般分为三大块:左边侧边栏显示用户基本信息和广告、中间文章部分、右边用户的文章专栏。整体用的是float。右边的文章position设置为fixed。左边侧边栏是当滚动高度超过侧边栏高度时,设置为fixed,即这时候侧边栏保持不变,bottom=0
let aside = document.getElementsByClassName('aside')[0]
let asideTop = aside.offsetTop
let asidescroll = document.body.scrollTop
let asideBottom = aside.offsetTop + aside.clientHeight
window.addEventListener('scroll', function() {
let screenBottom =
document.documentElement.scrollTop +
document.documentElement.clientHeight //获取当前界面距离顶部的高度
if (asideBottom < screenBottom) {
aside.classList.add('fixed')
} else {
aside.classList.remove('fixed')
}
})
在写右边栏position:fixed时出现了一点问题
跟着CSDN模仿着写的。
在设置右边recommend时,高度设置height:100%时,会出错。
这是因为flex布局的问题,flex布局内即使形状上被子元素撑开了,但是实际上还是没有撑开的。
因为整个页面是flex,使用了
justify-content:center
align-item:center