今日コンピューターでcsdnを調べたところ、記事のインターフェイスは一般に3つの部分に分かれていることがわかりました。左側のサイドバーには基本的なユーザー情報と広告、中央の記事の部分、右側にはユーザーの記事の列が表示されます。全体がフロートです。右側の記事の位置は固定に設定されています。スクロールバーの高さがサイドバーの高さを超えると、左側のサイドバーは固定に設定されます。つまり、この時点でサイドバーは変更されません。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')
}
})
書き込み位置に問題がありました:右の列で修正されました
。CSDNに従って、書き込みを模倣してください。
適切な推奨値を設定するときに、高さをheight:100%に設定すると、エラーが発生します。
これはフレックスレイアウトが原因であり、フレックスレイアウトの子要素によって図形が引き伸ばされても、実際には引き伸ばされません。
ページ全体がフレックスである
ため、justify-content:center
align-item:centerが使用されます