トップページの右下にバナーを固定したい

日本語 ディスカッション 技術的なQ＆A
1

お世話になっております。

現在マーチャントのサイト制作をしています。
テーマは『Debut』を使用中です。

トップページ右下に固定バナーを表示したくindex.liqued、theme.css、theme.jsに記載しています。
スマホだと固定表示するのですが、PCのみfixedが効かずfooter付近に表示されています。

HTML・CSS上では動いており、shopifyに入れるとこの現象が起こります。
原因として何が考えられるでしょうか。


  
  その他のお悩みはこちら
✕

{{ content_for_index }}

.bnr_camp{
  display:none;
  position:relative;
  text-align: center;
}
.bnr_camp a{
font-size: 14px;
display:block;
position:fixed;
z-index:999;
  bottom:20px;
  right: 50px;
  width:250px;
height:50px;
line-height: 50px;
background-color:#DFC5A6;
  cursor: pointer;
  border-radius: 10px;
}

.close{
  position: absolute;
  background-color: #333;
  color: #fff;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  top: -10px;
  right: -10px;
  line-height: 30px;
}

// バナー
$(function() {
  var topBtn = $('.bnr_camp');
  topBtn.hide();
  //スクロールが300に達したらバナー表示
  $(window).scroll(function () {
      if ($(this).scrollTop() > 300) {
      //バナーの表示方法
          topBtn.fadeIn();
      } else {
      //バナーの非表示方法
          topBtn.fadeOut();
      }
  });
  // 閉じるボタン
$('.close').click(function () {
      $(window).off('scroll'); // add
      $(topBtn).css("display","none");
  });
});

ご教示願います。
よろしくお願いいたします。

2

ブラウザで表記した段階のHTMLソースを保存してみて、それをPC ブラウザで開いてみるのはどうでしょうか？

動作している生のHTMLとCSSと何か差分が出ているのではと思います。

3

.bnr_camp a と .close が同じ箇所を指定してるからだと思います。同じ箇所のスタイルでは前のスタイルを打ち消します。

1 Like
4

ご教示ありがとうございます。

indexだと質問内容の状態だったのですが、header内に記述すると正常に動作いたしました！

1 Like