フロントエンドの天井効果を達成する方法を段階的に教えます-jsチュートリアル-php.cn

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

烟雨青岚

リリース： 2020-07-06 11:33:51

転載

3327 人が閲覧しました

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

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

#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(&#39;#searchBar&#39;).offsetTop;
    if (scrollTop > offsetTop) {
         document.querySelector(&#39;#searchBar&#39;).style.position="fixed";
         document.querySelector(&#39;#searchBar&#39;).style.top="0";
    } else {
         document.querySelector(&#39;#searchBar&#39;).style.position="";
         document.querySelector(&#39;#searchBar&#39;).style.top="";
    }})

ログイン後にコピー

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

position: sticky;
top:0

ログイン後にコピー

読んでいただきありがとうございます。多くのメリットがあることを願っています
この記事は、https://blog.csdn.net から転載しています。 /zqyzqy22/article/details/90634702
推奨チュートリアル: "
JS チュートリアル
"
以上がフロントエンドの天井効果を達成する方法を段階的に教えますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。