最近よく見かける、記事横のサイドバー広告枠が、画面の上の方までスクロールしたら、画面上部に固定表示するのを、CSSだけで実装してみます。
言葉だけで使えるのが難しい為、実際どういった動きの物を作るのか、Gifアニメーションにしてみました。
スポンサーリンク
position: sticky
今回は、CSSのposition:stickyを使って、広告枠のスクロール固定を実装していきます。
新しい仕様のCSSのため、一部対応していなブラウザがあり、ブラウザ別の対応状況は以下のようになっています。
主要なブラウザは、ほぼサポートされている感じですね♪
IEなどの未対応ブラウザであっても、画面上部でスクロール固定されずに、スクロールで上の方に見切れて行くだけなので、特に害はありません。
position: stickyのブラウザ対応状況 (2019年1月現在)
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など、一部の広告プロバイダでは、スクロール固定の広告を使用すると、ポリシー違反になる可能性があります。
使用する場合は、自己責任でお願いします。
0 件のコメント:
コメントを投稿