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

**URL:** <https://community.shopify.com/t/topic/40732>\
**Category:** 技術的なQ＆A\
**Created:** [March 24, 2021, 12:50pm UTC](https://community.shopify.com/t/topic/40732 "2021-03-24T12:50:03Z")\
**Posts on this page:** 4\
**Page:** 1

## AI-generated summary

ShopifyのDebutテーマで、トップページ右下に固定バナーを表示したいが、スマホでは`position: fixed`が効く一方、PCではフッター付近に表示される問題が相談された。実装は`index.liquid`、`theme.css`、`theme.js`に追加され、スクロール300px以降でバナーを表示し、閉じるボタンで非表示にするjQueryも使われていた。

主な指摘は以下の2点。
・ブラウザで生成後のHTMLソースを保存して比較し、Shopify上で差分が出ていないか確認する案。
・`.bnr_camp a`と`.close`の指定箇所が競合し、前のスタイルを打ち消している可能性の指摘。

最終的に、記述場所を`index`内から`header`内へ移したところ、PCでも正常に固定表示されるようになったと報告された。原因の厳密な特定まではされていないが、少なくとも記述位置が挙動に影響していたことが確認され、実質的には解決済み。

<div class="post-metadata">

**Author:** ![hrn321](https://avatars.discourse-cdn.com/v4/letter/h/f0a364/32.png) [@hrn321](https://community.shopify.com/u/hrn321)\
**Post date:** [March 24, 2021, 12:50pm UTC](https://community.shopify.com/t/topic/40732/1 "2021-03-24T12:50:03Z")

</div>

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

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

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

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

```css

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

{{ content_for_index }}

```

```css
.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;
}

```

```javascript
// バナー
$(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");
  });
});

```

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

---

<div class="post-metadata">

**Author:** ![junichiokamura](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/junichiokamura/32/299737_2.png) [@junichiokamura](https://community.shopify.com/u/junichiokamura)\
**Post date:** [April 15, 2021, 11:53am UTC](https://community.shopify.com/t/topic/40732/2 "2021-04-15T11:53:03Z")

</div>

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

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

---

<div class="post-metadata">

**Author:** ![\_osamu\_iwasaki](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/_osamu_iwasaki/32/272617_2.png) [@\_osamu\_iwasaki](https://community.shopify.com/u/_osamu_iwasaki)\
**Post date:** [April 15, 2021, 12:03pm UTC](https://community.shopify.com/t/topic/40732/3 "2021-04-15T12:03:24Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![hrn321](https://avatars.discourse-cdn.com/v4/letter/h/f0a364/32.png) [@hrn321](https://community.shopify.com/u/hrn321)\
**Post date:** [April 19, 2021, 2:04am UTC](https://community.shopify.com/t/topic/40732/4 "2021-04-19T02:04:28Z")

</div>

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

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