メニューや広告をスクロールに追尾させる

メニューや広告をスクロールに追尾させる

メニューや広告をスクロールに追尾させるのは難しそうですが、意外と簡単に実装できます
レイアウトを気にせずとにかく、固定させて表示させるのならCSSで「position : fix;」を使う手もあります
参考　position:

しかし、レイアウトを気にするなら、例えばサイドバーに沿ってメニューや広告を配置して、スクロールに追尾させたいと思うことも多いと思われます。
そういった時に、極めて簡単に実装できる方法があります。

右側のピンクのボックスと画像に注目してください
そして、画面を下へスクロールさせてみてください
普通なら画像は画面外に消えてしまうはずですが、画面に残り、
さらに下にスクロールさせるとピンクのボックスの内部でとどまっています
フッターがあるならその表示を邪魔しないのがわかると思います

この実装には、まず、画像にclassを「imgfix」とつけて、以下のCSSを設定しました

/*↓画像をスクロールに追尾させる*/
.imgfix{position: sticky;
        top:30px;}
                

画像はスクロールしたときにtopから30pxのところでfixしています
classの設定と2行のCSSでほぼ完成しています

その他には、ピンクのボックスにpadding-bottomに30px指定しただけです
このパディングで、画像がボックスの下限にくっつかないようにしています

参考　position:

縦長のボックス（サイドバーなど）を作り、画像の代わりにdiv要素などを使い、メニューや広告を設定すれば、同じように実装できると思います
　

画像だけ動く