サイドバーの広告を、CSSでスクロール固定する

2019年1月16日水曜日

CSS

t f B! P L

サイドバーの広告を、CSSでスクロール固定する

最近よく見かける、記事横のサイドバー広告枠が、画面の上の方までスクロールしたら、画面上部に固定表示するのを、CSSだけで実装してみます。

言葉だけで使えるのが難しい為、実際どういった動きの物を作るのか、Gifアニメーションにしてみました。

広告枠スクロール固定の実行動画Gifアニメーション

position: sticky

今回は、CSSのposition:stickyを使って、広告枠のスクロール固定を実装していきます。
新しい仕様のCSSのため、一部対応していなブラウザがあり、ブラウザ別の対応状況は以下のようになっています。
主要なブラウザは、ほぼサポートされている感じですね♪
IEなどの未対応ブラウザであっても、画面上部でスクロール固定されずに、スクロールで上の方に見切れて行くだけなので、特に害はありません。

position: stickyのブラウザ対応状況 (2019年1月現在)
2019年1月現在のposition: sticky対応状況
Can I use

サンプルード

[HTML]

<body>
  <div class="container">
    <div class="post-body" style="height:2000px">
      記事の内容<br/>
      です<br/>
    </div>
    <div class="post-sidebar">
      <div>
        <small>新着記事</small>
        <hr/>
        <div>NNNNNNNNNNNNNNN</div>
        <div>NNNNNNNNNNNNNNN</div>
        <div>NNNNNNNNNNNNNNN</div>
        <div>NNNNNNNNNNNNNNN</div>
        <br/>
      </div>
      <div id="ad">
        <small>スポンサーリンク</small>
        <hr/>
        <div class="ad-box">
          広告枠
        </div>
      </div>
    </div>
  </div>
</body>

[CSS]

.container {
  position: relative;
}
.post-body {
  background: rgb(219, 219, 219);
  margin-right: 300px;
}
.post-sidebar {
  position: absolute;
  top: 0;
  right: 0;
  width: 290px;
}
.ad-box {
  width: 240px;
  height: 240px;
  background: rgb(224, 63, 63);
  margin-bottom: 10px;
}
#ad {
  position: -webkit-sticky;
  position: sticky;  /*  */
  top: 10px;
}

[JavaScript]

document.addEventListener('DOMContentLoaded', function () {
  var post_body = document.querySelector(".post-body");
  var post_sidebar = document.querySelector(".post-sidebar");
  post_sidebar.style.height = post_body.clientHeight + "px";
});

注意事項

Google Adsenseなど、一部の広告プロバイダでは、スクロール固定の広告を使用すると、ポリシー違反になる可能性があります。
使用する場合は、自己責任でお願いします。

スポンサーリンク

QooQ