フロントエンドの天井効果を達成する方法を段階的に教えます

#フロントエンドで天井効果を実現

#1. スクロールイベントを監視し天井機能を実現

2. 上限を達成するための CSS

ページを作成するときに、ナビゲーション メニューの初期位置が先頭ではないというこの要件によく遭遇します。をスライドするとナビゲーションメニューが先頭にスライドします 位置は先頭に固定され、下にスライドするとナビゲーションメニューは元の位置に戻ります。

#ロールアップされた Web ページの高さ/幅

(つまり、ブラウザのスクロール バーがスクロールされた後に非表示になるページ コンテンツの高さ)

(javascript)        document.documentElement.scrollTop //firefox

(javascript)        document.documentElement.scrollLeft //firefox

(javascript)        document.body.scrollTop //IE

(javascript)        document.body.scrollLeft //IE

(jqurey)             $(window).scrollTop() 

(jqurey)             $(window).scrollLeft()

Web ページの作業領域の高さと幅

(javascript)       document.documentElement.clientHeight// IE firefox       

(jqurey)             $(window).height()

ドキュメントの上部と左側からの要素のオフセット値

(javascript)        DOM元素对象.offsetTop //IE firefox

(javascript)        DOM元素对象.offsetLeft //IE firefox

(jqurey)             jq对象.offset().top

(jqurey)             jq对象.offset().left

ページ要素とブラウザー作業領域の上部の間の距離を取得します。 Distance

ページ要素とブラウザー作業領域の上部の間の距離 = からの要素のオフセット値ドキュメントの上部 - ロールアップされた Web ページの高さ

つまり:

ページ要素とブラウザー ワークスペースの上部の間の距離 = DOM 要素オブジェクト。 offsetTop - document.documentElement.scrollTop

1. スクロール イベントをリッスンし、天井関数を実装します

window.addEventListener("scroll",()=>{
	let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;  
    let offsetTop = document.querySelector('#searchBar').offsetTop;
    if (scrollTop > offsetTop) {
         document.querySelector('#searchBar').style.position="fixed";
         document.querySelector('#searchBar').style.top="0";
    } else {
         document.querySelector('#searchBar').style.position="";
         document.querySelector('#searchBar').style.top="";
    }})

2. 天井を達成するための CSS

position: sticky;
top:0

読んでいただきありがとうございます。多くのメリットがあることを願っています

この記事は、https://blog.csdn.net から転載しています。 /zqyzqy22/article/details/90634702

推奨チュートリアル: "

JS チュートリアル

"

以上がフロントエンドの天井効果を達成する方法を段階的に教えますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。