下スクロールで消えるサイドバナー

Question

いつもお世話になっております。

こちらのスマホページで使っているサイドバナーを再現したいです。
どのように作ればよいでしょうか？

https://item.rakuten.co.jp/cream-dot/a00156/

下にスクロールで消える
上にスクロールで表示する

どうぞよろしくお願いいたします。

Answer

ECマスターズの伊藤です。

> こちらのスマホページで使っているサイドバナーを再現したいです。
> どのように作ればよいでしょうか？

下記のコードを
各商品のスマートフォン用説明文
もしくは
スマートフォン用商品共通説明文に
ご登録いただくことで
設置していただくことができます。

JavaScritpとCSSは
外部（楽天GOLD）に記述いただくことで
文字数を削減することができますので
文字数がオーバーした際などは
ご検討くださいませ。



ここに表示したいバナーを記述



// <
var startPos = 0,winScrollTop = 0;
jQuery(window).on('scroll',function(){
    winScrollTop = jQuery(this).scrollTop();
    if (winScrollTop >= startPos) {
        jQuery('.event_scroll_bana').addClass('hide');
    } else {
        jQuery('.event_scroll_bana').removeClass('hide');
    }
    startPos = winScrollTop;
});



.event_scroll_bana{
    position:fixed;
    bottom:75px;
    right:0;
    transition:.3s cubic-bezier(.4, 0, .2, 1);
    z-index:99999999;
}
.event_scroll_bana.hide{
    transform: translateY(300px);
}

Answer

早速回答ありがとうございます。

試しにスマートフォン用商品共通説明文へ入れてみたところ、
RMS上の 登録ボタン 戻るボタンが
行方不明になる現象がおきてしまうようです。

頂いたJavaScritpとCSSのどこかが干渉してしまっているのでしょうか？
どうぞよろしくお願いいたします。###HR######IMG013c6d857e2bb81a6206fd78dee9a2adb.jpegIMG0######BR###

Answer

ECマスターズの伊藤です。

> 試しにスマートフォン用商品共通説明文へ入れてみたところ、
> RMS上の 登録ボタン 戻るボタンが
> 行方不明になる現象がおきてしまうようです。

大変失礼いたしました。
先程ご案内したタグにて
一番最後のタグを

誤：
正：

とご案内しておりました。

お手数ですが、上記の通り修正いただくか
先程、ご案内のコードを修正いたしましたので
改めてご登録をお願いいたします。

Answer

早速試したところ、登録できました。

表示もできました 笑 ありがとうございます。
ただスクロールしたところ、表示位置が安定していないようで、少し上に表示されてしまったり、下に表示されてしまったりするのですが、なぜでしょうか。

縦にバナーを2.3つほど並べたいと考えているので、できれば固定位置で、上記でお伝えした参考ページのように固定位置に表示したいです。

ご不便おかけいたしますが、一度ご確認頂きご教授いただけると幸いです。

Answer

ECマスターズの伊藤です。

> ただスクロールしたところ、表示位置が安定していないようで、少し上に表示されてしまったり、下に表示されてしまったりするのですが、なぜでしょうか。

確認させていただいたところ
バナー設置君で作成されたタグを
ご利用頂いていたため
設定が競合してしまい、安定しない表示となっていたようです。

先程ご案内しておりましたタグにて
下から75pxの位置に
固定するように設定しております。

そのため

Answer

ありがとうございました＾＾

修正しましたら、無事できました。