タイトルのまんま。ピントルで追従型の広告を作成するにあたり、ちょろっと作ったのでメモ。

サンプルについては、ここら辺の専門ページを見て頂ければ幸いです。

スニーカーの専門ページ

まずはコード

※1 $(window).load(function(){…} を使っている理由は、アドセンスなどの非同期広告が遅れて表示されてdivの高さがそれぞれ変化するため、タイミングを最後に遅らせています

実装したコードとの違いと補足

上のコードはシンプルなもので、実際に実装しているものよりもかなり単純に書いています

これにより以下の2点について問題が発生します。

  1. フッターを突き抜けてしまうことがある。
  2. サイドカラムがメインコンテンツよりも長い場合、おかしな挙動になる場合がある。

これらを解決するために、フッター直上でfixed要素の取り外しと、最も下に来たときの高さなどを計算して、ベストな位置で停止させることが必要になります。

また、サイドカラムの高さとメインコンテンツの高さを取得して、事前に比較させておくことも大切ですね。

事前準備無く書き始めたので条件分岐で混乱した部分もあり、時間をかければもっときれいなコードがかけたかもしれませんが、とりあえず現状ではささーっと書いてサンプルのような挙動で落ち着いています(スマホには表示していません)。

何かバグがあったら教えてくれると嬉しいです。

 

さぁ、残り短いタバコ生活を満喫するとしますか・・・。

【2016/09/16】禁煙開始5日前(できる気がしない)

 

仕事そっちのけで記事を書いた人

プログラムしたりトレードしたりスケートしたりけん玉したりするひと。趣味はトライアンドエラー。優しいときもあれば厳しいときもある。寝不足を基本とする。

Comment

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。