CSSはウェブページの列の左側が固定されていることを認識し、一番下までスクロールすると自動的に位置を調整します。

プレビューアドレス:

https://ovsexia.gitee.io/leftfixed/

html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<ヘッド>
<meta http-equiv="コンテンツタイプ" コンテンツ="text/html; charset=utf-8" />
<script src="js/jquery-1.10.1.min.js" type="text/javascript"></script>
<link href="css/layout.css" type="text/css" rel="スタイルシート" />
<link href="css/style.css" type="text/css" rel="スタイルシート" />
</head>
<div class="top"></div>
<div class="page">
  <div class="left">
    <div class="left_poi"></div>
    <div class="left_in">
      <p><br />< ...
    </div><!--left_in-->
    <スクリプト>
    $(ウィンドウ).スクロール(関数()
    {
        サクション();
    });
    関数アクション()
    {
        sj = 20; // 下部間隔 st = $(window).scrollTop(); // スクロールバーの高さ sd = $(".left_poi").offset().top;
        sd_h = $(".left_in").height();
        sb = $(".bottom").offset().top;
        sb_h = $(".bottom").height();
        rd_h = $(".right").height();
        bh = ウィンドウの内側の高さ;
        si = sb-sd_h;
        st>sd && rd_h>=sd_hの場合{
            $(".left_in").addClass("on");
            もしst>siの場合{
                sy = bh-(sb-st)+sj;
                $(".left_in").css({"top":"auto","bottom":sy+"px"});
            }それ以外{
                $(".left_in").css({"top":"","bottom":""});
            }
        }それ以外{
            $(".left_in").removeClass("on");
        }
    }
    </スクリプト>
  </div><!--左-->
  <div class="right"></div>
  <div class="clear"></div>
</div><!--ページ-->
<div class="bottom"></div>
</本文>
</html>

@文字セット "utf-8";
.clear {clear:both; 高さ:0 !important; 幅:0 !important; オーバーフロー:hidden; フォントサイズ:0;}
.top {幅:100%; 高さ:150px; 背景:#0CC;}
.bottom {幅:100%; 高さ:400px; 背景:#39C;}
.page {幅:1200px; 余白:20px 自動; 位置:相対;}
.left {幅:200px; フロート:left;}
.left_in {幅:200px; 背景:#46bc67; 上境界線:3px 実線 #000; 下境界線:3px 実線 #000;}
.left_in.on {位置:固定; 上:0;}
.left_poi {幅:100%; 高さ:1px; オーバーフロー:非表示;}
.right {幅:960px; 高さ:2100px; フロート:right; オーバーフロー:hidden; 背景:#FC3;}

要約する

上記は私が皆さんに紹介したCSSです。Webページの列の左側を固定し、下にスクロールしたときに位置を自動的に調整する方法です。お役に立てば幸いです。ご質問がある場合は、メッセージを残してください。すぐに返信します。また、123WORDPRESS.COM ウェブサイトをサポートしてくださっている皆様にも感謝申し上げます。

<<: PCとモバイルの適応の問題に対する迅速な解決策

>>: HTML の基礎: HTML コンテンツの詳細