HOME
サイトマップ
営業日カレンダー
お問い合わせ

jQueryプラグインsimple-scroll-followを使って、指定した要素を画面スクロールに追従

article

width: 200px;
position: static;
top: 0px;
left: 0px;

サンプルテキスト1

サンプルテキスト2

サンプルテキスト3

サンプルテキスト4

サンプルテキスト5

サンプルテキスト6

サンプルテキスト7

サンプルテキスト8

サンプルテキスト9

サンプルテキスト10

jQueryプラグインsimple-scroll-followを使って、指定した要素を画面スクロールに追従させます。サンプルの動きは「aside」（薄い赤の背景色）が対象です。画面をスクロールさせると「article」と「aside」は、上に移動しますが、「header」（背景が緑の斜め線）が隠れたところで、「aside」は、上部に位置が固定されます。

htmlソース

    <div id="contents">
      <article>
        <h3>article</h3>
        <p>
          width: 200px;<br>
          position: static;<br>
          top: 0px;<br>
          left: 0px;
        </p>
        <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>
      </article>
      <aside style="position: absolute; width: 200px;">
        <h3>aside</h3>
        <p>
          width: 200px;<br>
          position: absolute;<br>
          top: 0px;<br>
          left: 600px;
        </p>
      </aside>
    </div>

 

※引用と参考；https://sutara79.github.io/jquery.simple-scroll-follow/
戻るボタン