JavaScriptで上位表示を実現する方法

top 関数を実装する Javascript メソッド: 1. getBoundingClientRect を通じて要素からブラウザ ウィンドウの上部までの距離を取得します; 2. 「$(document).scrollTop() for (...)」の方法でできます。

この記事の動作環境: Windows7 システム、JavaScript バージョン 1.8.5、Dell G3 コンピューター。

JavaScript はピン留めされた関数を実装します

JavaScript でピン留めされた関数を実装する方法はたくさんあります。私も以前にいくつか使用したことがあります。もっと複雑に感じます。これが必要です。最近やったことがあるので、インターネットでも情報を探したところ、ページ要素からブラウザ ウィンドウの上部までの距離を取得できるメソッド getBoundingClientRect() を見つけました。

最終的なコードは次のとおりです:

let len = document.getElementById('flexbox').getBoundingClientRect().top;//获取元素到浏览器视窗顶部的距离
//$(document).scrollTop()为滚动条的高度
        for (let i = $(document).scrollTop(); i < len + $(document).scrollTop(); i++) {
            setTimeout(function () {
                window.scrollTo(0, i);
            }, 0)
        }

ループを使用する主な目的は、要素を上に配置したときに邪魔にならないようにすることです。このプロセスは、i を変更することで実現できます。同時に、1 つのことに注意する必要があります。for ステートメントが使用される場合は、let i ではなく var i になります。i がすぐに有効になるように、タイマーを即時実行関数でラップする必要があります。

この方法で実現されるトップとアンカー ポイントへの固着の効果は似ています。フローティング トップ (特定の部分が上部に固定される) を実現したい場合は、position:fixed を使用して実現することを検討できます。 。

それでいいよ。 。 。 。

[推奨学習: JavaScript 基本チュートリアル]

以上がJavaScriptで上位表示を実現する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。