HTML ページをスクロールするときに一部のコンテンツを固定位置に固定する方法

この記事では主に、レイアウトに役立つ、HTML ページ内の一部のコンテンツを固定してスクロール時にスクロールしないようにする方法を紹介します。簡単に説明すると、詳細は次のとおりです。

エフェクトのスクリーンショット:

ページのソースコード:

<!DOCTYPE html>
<html>
<ヘッド>
    <メタ文字セット="UTF-8">
    <title>無題のページ</title>
</head>
<body style="width: 900px; margin: 0px auto; line-height: 23px; padding: 10px;">
<div>
    <div style="float: left; width: 120px;">
        <div>
            転がります<br/>
            スクロールコンテンツ領域<br/>
            スクロールコンテンツ領域<br/>
            スクロールコンテンツ領域<br/>
        </div>
        <div id="div1" style="border: solid 1px gray; width: 90px; padding: 10px; background-color: #eff;">
            スクロールしません<br/>
            あなたは私を見て<br/><br/> 私は転がらない<br/>
            あなたは私を見て<br/><br/> 私は転がらない<br/>
            あなたは私を見て<br/><br/> 私は転がらない<br/>
            私を見て<br/><br/>


        </div>
    </div>
    <div style="float: right; width: 750px; border: solid 1px gray; padding: 10px;">
        <span>ssssssssssssss</span><br>
        <span>ssssssssssssss</span><br>
        <span>ssssssssssssss</span><br>
        <span>ssssssssssssss</span><br>
        <span>ssssssssssssss</span><br>
        <span>ssss 私はコンテンツですssss</span><br>
        <span>ssssssssssssss</span><br>
        <span>sssssss 私はコンテンツですssssssss</span><br>
        <span>ssssssssssssss</span><br>
        <span>sssssss 私はコンテンツですssssssss</span><br>
        <span>ssssssssssssss</span><br>
        <span>ssssss 私はコンテンツですsssssssss</span><br>
        <span>ssssssssssssss</span><br>
        <span>sssssssssssssss</span><br><span>ssssss私がコンテンツですsssssssss</span><br>
        <span>ssssssssssssss</span><br>
        <span>sssssssssssssss</span><br><span>ssssss私がコンテンツですsssssssss</span><br>
        <span>ssssssssssssss</span><br>
        <span>sssssssssssssss</span><br><span>ssssss私がコンテンツですsssssssss</span><br>
        <span>ssssssssssssss</span><br>
        <span>sssssssssssssss</span><br><span>ssssss私がコンテンツですsssssssss</span><br>
        <span>ssssssssssssss</span><br>
        <span>sssssssssssssss</span><br><span>ssssss私がコンテンツですsssssssss</span><br>
        <span>ssssssssssssss</span><br>
        <span>sssssssssssssss</span><br><span>ssssss私がコンテンツですsssssssss</span><br>
        <span>ssssssssssssss</span><br>
        <span>sssssssssssssss</span><br><span>ssssss私がコンテンツですsssssssss</span><br>
        <span>ssssssssssssss</span><br>
        <span>sssssssssssssss</span><br><span>ssssss私がコンテンツですsssssssss</span><br>
        <span>ssssssssssssss</span><br>
        <span>sssssssssssssss</span><br><span>ssssss私がコンテンツですsssssssss</span><br>
        <span>ssssssssssssss</span><br>
        <span>sssssssssssssss</span><br><span>ssssss私がコンテンツですsssssssss</span><br>
        <span>ssssssssssssss</span><br>
        <span>sssssssssssssss</span><br><span>ssssss私がコンテンツですsssssssss</span><br>
        <span>ssssssssssssss</span><br>
        <span>sssssssssssssss</span><br><span>ssssss私がコンテンツですsssssssss</span><br>
        <span>ssssssssssssss</span><br>
        <span>sssssssssssssss</span><br><span>ssssss私がコンテンツですsssssssss</span><br>
        <span>ssssssssssssss</span><br>
        <span>sssssssssssssss</span><br><span>ssssss私がコンテンツですsssssssss</span><br>
        <span>ssssssssssssss</span><br>
        <span>sssssssssssssss</span><br><span>ssssss私がコンテンツですsssssssss</span><br>
        <span>ssssssssssssss</span><br>
        <span>sssssssssssssss</span><br><span>ssssss私がコンテンツですsssssssss</span><br>
        <span>ssssssssssssss</span><br>
        <span>ssssssssssssss</span><br>

    </div>
</div>
<script type="text/javascript">
    関数htmlScroll() {
        var top = document.body.scrollTop || document.documentElement.scrollTop;
        elFix.data_top < top の場合 {
            elFix.style.position = '固定';
            elFix.style.top = 0;
            elFix.style.left = elFix.data_left;
        }
        それ以外 {
            elFix.style.position = '静的';
        }
    }

    関数 htmlPosition(obj) {
        var o = obj;
        var t = o.offsetTop;
        var l = o.offsetLeft;
        o = o.offsetParent の間 {
            t += o.offsetTop;
            l + = o.offsetLeft;
        }
        obj.data_top = t;
        obj.data_left = l;
    }

    var oldHtmlWidth = document.documentElement.offsetWidth;
    window.onresize = 関数 () {
        var newHtmlWidth = document.documentElement.offsetWidth;
        (古いHtmlWidth == 新しいHtmlWidth)の場合{
            戻る;
        }
        古いHtmlWidth = 新しいHtmlWidth;
        elFix.style.position = '静的';
        htmlPosition(elFix);
        htmlスクロール();
    }
    window.onscroll = htmlScroll;

    var elFix = document.getElementById('div1');
    htmlPosition(elFix);

</スクリプト>
</本文>
</html>

HTML ページがスクロールするときに一部のコンテンツを固定位置に維持する方法についての記事はこれで終わりです。HTML ページのスクロールに関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<: HTML でテーブルを分割および結合する (colspan、rowspan)

>>: HTML+CSS ボックスモデルの例 (円、半円など) 「border-radius」はシンプルで使いやすい