jsがdivの高さをスクロールの高さより低く設定したときに修正されました

今日コンピューターで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が使用されます

おすすめ

転載: blog.csdn.net/qq_42535651/article/details/104154726