floatレイアウト対応！サイドバーの画像などを固定（追従）させる方法

※当サイトにはプロモーションが含まれています。

Webサイトをスクロールした際に、サイドバーの一部が途中から追従（追尾）して固定表示される動きは、２カラムレイアウトのサイトでよく使われます。

そして、多くのワードプレステーマ（SWELLやTHOR）などでは、この「追尾サイドバー」機能がウィジェットに備わっています。

しかし、当サイトで使用している賢威では、追従するサイドバーの機能がないので、CSSとJavaScriptで作成してみました。

にゃテック

ワードプレスの場合は「WP Sticky」のプラグインを使って、任意のCSSセレクタ（画像など）を固定する方法もあるにゃ。

サイドバーを固定（スクロール追従）する方法

WEBサイトが下にスクロールすると、サイドバーの一部が追従してくるHTML、CSS、JavaScriptです。

HTML

<div id="nya-stick-wrapper">
<div id="nya-stick-widget">
<!-- この部分に追従させたいコードを記載します -->
</div>
</div>

サイドバーで追従させたい要素としては、画像バナー（アフィリエイトバナー）などが多いのではないでしょうか。

その場合、次のようなコードになります。

<div id="nya-stick-wrapper">
<div id="nya-stick-widget">
<!-- この部分にアフィリエイトコードを記載します -->
<a href="https://px.a8.net/svt/ejp?a8mat=xxxxxxx" rel="nofollow"><img border="0" width="300" height="250" alt="" src="https://www27.a8.net/svt/bgt?aid=xxxxxxxx&wid=006&eno=01&mid=xxxxxxxxxx0&mc=1"></a><img border="0" width="1" height="1" src="https://www14.a8.net/0.gif?a8mat=xxxxxxxx" alt="">
</div>
</div>

続いて、CSSになります。

CSS

@media (min-width: 768px) {
#nya-stick-widget {
position: relative;
}
#nya-stick-widget.nya-stick {
position: fixed;
top: 20px; /* 必要に応じて調整 */
z-index: 100;
}
}

topの値を変更することで、固定表示される位置を調整することができます。

グローバルメニューなどが追従するデザインの場合、サイドバーと重なることがあるため、適切にtopの値を調整してください。

にゃのらいと

topの値を大きくすると、その分表示される位置が下になるにゃ

最後に、JavaScriptです。

JavaScript

document.addEventListener("DOMContentLoaded", function () {
const widget = document.getElementById("nya-stick-widget");
const wrapper = document.getElementById("nya-stick-wrapper");
const originalTop = widget.getBoundingClientRect().top + window.scrollY;
window.addEventListener("scroll", function () {
if (window.innerWidth >= 768) {
if (window.scrollY > originalTop) {
widget.classList.add("nya-stick");
widget.style.width = wrapper.offsetWidth + "px";
wrapper.style.height = widget.offsetHeight + "px"; // 高さ確保
} else {
widget.classList.remove("nya-stick");
widget.style.width = "auto";
wrapper.style.height = "auto";
}
} else {
widget.classList.remove("nya-stick");
widget.style.width = "auto";
wrapper.style.height = "auto";
}
});
});

if (window.innerWidth >= 768)の部分で、画面の横幅が768px以上（≒PC表示）のときのみ追従を有効にしています。

getBoundingClientRect().top + scrollYで、正確なウィジェットの縦位置を取得しています。

また、固定表示した際の横幅崩れや、下のコンテンツとの重なりを避けるために、