よく見かけるようになった、スクロールしていくとサイドバーがそのままウインドウについてきて、フッターの箇所まで来ると止まるというのを作ってみました。 いろいろなところを参考に考えながら作ったので、JSに無駄なものが多いかと思いますがひとまず出来たので置いておこうと思います。 ウインドウサイズが小さくてもずれない こういう動きのサイトで、ウインドウサイズが小さいとそのままコンテンツ部分にかぶってしまうというのをたまに見ます。 原因はだいたい動く要素のfixedの値がそのままなためです。ですのでウインドウサイズが小さくてもかぶらないようにしました。 サンプルページ JavaScriptのソース IE6にも対応するためif文で処理を分けてます。 $(function(){ //固定する要素 var box = $('#nav'); //上の間隔 var topMarge = box.offset(
![スクロールしてフッターで止まる、上揃いのサイドバー](https://cdn-ak-scissors.b.st-hatena.com/image/square/f418c5b8e896aa5065e99d70c900e8296d7aeb9f/height=288;version=1;width=512/https%3A%2F%2Fwebdrawer.net%2Fwp%2Fwp-content%2Fuploads%2F2020%2F10%2Fthm.jpg)