LANG SELRCT

コードを書く場所についてはこちら

2018年3月19日月曜日

stickyで画面スクロースしてもついてくる要素を作る


こういう要素を作ってみる

固定要素(スクロールしても上端に固定)
テキスト1
テキスト2
テキスト3
テキスト4
テキスト5
テキスト6
テキスト7
テキスト8
テキスト9
テキスト10
テキスト11
テキスト12




コード.gs
function doGet() {
  return HtmlService.createHtmlOutputFromFile("index");
}
意訳
この機能がやること
指定したHTMLファイルを表示する




index.html
<!DOCTYPE html>
<html>
<head>
  <style>
    .sticky {
      position: sticky;
      top: 0;
    }

    .height40 {
      height: 40px;
    }

    .height1200 {
      height: 1200px;
    }

    .card {
      width: 360px;
      border: solid 1px lightgray;
      box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
      background: white;
    }
  </style>
</head>
<body>
  <div class="card height40 sticky">固定エリア</div>
  <div class="card height1200">
    <p>テキスト1</p>
    <p>テキスト2</p>
    <p>テキスト3</p>
    <p>テキスト4</p>
    <p>テキスト5</p>
    <p>テキスト6</p>
    <p>テキスト7</p>
    <p>テキスト8</p>
    <p>テキスト9</p>
    <p>テキスト10</p>
    <p>テキスト11</p>
    <p>テキスト12</p>
  </div>
</body>
</html>
意訳
 



stickyのスタイル
画面をスクロールしても↓で設定した位置に固定する
上端からの距離


height40のスタイル
高さ


height1200のスタイル
高さ


cardのスタイル
幅
枠線
影
背景色




固定エリアのdiv
スクロールされるエリアのdiv