「.is-fixed」が適用されない

実現したいこと

追従時だけid属性「cart-k」に「.is-fixed」を適用させたい

前提

Bcartというカートシステムを使い、干渉できないHTMLのページをカスタマイズしています。
知識のない状態から独学で行っている状況です。

今回、HTMLに「hidden」が入っているため、cssの「position: sticky」が使えず、JavaScriptにて指定エリア内<form>～</form>での追従を実装させたいと考えています。

内容

JavaScriptにてスクロール位置に応じて「.is-fixed」を適応させたいので、css側で追従要素である「cart-k」に「.is-fixed」を付与させたいのですが、適応されず困っています。
どうすれば適応できるのでしょうか？
自信で色々と検索し、確認してみたのですが原因が分かりませんでした。
理解不足や勉強不足のため大変恐縮ですが、お力を貸していただけませんでしょうか。
何卒、よろしくお願いいたします。

該当のソースコード

■ＨＴＭＬ

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4省略
5</head>
6<body class="  body-product-detail    __is-guest ">
7省略(sectionが6個程あります。)
8
9<form method="POST" action="URL" accept-charset="UTF-8" name="setForm" class="c-form"><input name="_token" type="hidden" value="JGbYwuFrw3G2z01SpA5x40TevLik5gu3gvoA84Gp">
10<section class="__set p-product-set">
11    <table>
12        <thead>
13            <tr>
14                <th class="__description">内訳</th>
15                <th class="__price">
16                    <div class="__total">販売価格</div>
17                    <div class="__detail">（単価 × 入数）</div>
18                </th>
19                <th class="__order">注文数</th>
20            </tr>
21        </thead>
22        <tbody>
23        <tr class="__item __item--1  ">
24         <td class="__description">
25              <h2 class="__name">
26                 ABS_BK_D00200-1000　/　ABS 黒 φ10×L1000    
27              </h2>
28             <div class="__spec">
29             </div>
30         </td>
31         <td class="__price">
32             <div class="__heading">
33                <div class="__total">販売価格</div>
34                <div class="__detail">（単価 × 入数）</div>
35             </div>
36             <div class="__body">
37                  <div class="__total"><span class="c-tax-price __tax-price __is-none">1,100,000円</span></div>
38                  <div class="__detail">
39                    （<span class="__unit-price"><span class="c-tax-price __tax-price __is-none">1,100,000円</span></span> × <span class="__quantity">1</span><span class="__unit"></span>）
40                  </div>
41            </div>
42          </td>
43          <td class="__order">
44              <div class="__error c-alert c-alert--danger __js-add-cart-error" style="display: none;"></div>
45              <div class="__heading">注文数</div>
46              <div class="__body">
47                  <div class="__input">
48                     <input placeholder="0" class="__js-order-count __js-disabled-enter-key" name="p[1]" type="number"><span class="__spin p-spin"><span class="__minus __js-spin"></span><span class="__plus __js-spin"></span></span>
49                   </div>
50                     <dl class="__cart-count __js-cart-count"  style="display: none;" >
51                      <dt>追加済</dt>
52                      <dd>0</dd>
53                  </dl>
54                    <div class="__notice">
55                       <dl class="__min-max-order">
56                           <dt>注文可能数</dt>
57                           <dd class="__min">
58                             <span class="__title">最小</span>
59                             <span class="__count">1</span>
60                           </dd>
61                      </dl>
62                 </div>
63              </div>
64          </td>
65        </tr>
66        <tr class="__item __item--2  ">
67   　　 (省略※item30個ほど続きます。)
68      </tbody>
69    </table>
70</section>
71<section class="__add-cart">
72    <input type="hidden" name="act" value="insert">
73    <button type="button" class="__submit c-button-submit __js-add-cart" id="cart-k">カートに入れる</button>
74</section>
75</form>
76       省略           
77    <footer></footer>
78  </body> 
79<html>

■css

css
1/*商品ページのカートスクロールエリア*/
2form.c-form {
3  position: relative;
4}
5/*商品ページのカートボタン追従設定(本件悩みのcss)*/
6#cart-k.is-fixed {
7  position: fixed;
8}
9/*商品ページのカートボタンデザイン*/
10#cart-k {
11    position: absolute;
12    display: flex;
13    text-align: right;
14    vertical-align: middle;
15    width: 10px;
16    font-weight: 400;
17    color: #fbfbfb;
18    border-width: 2px;
19    border-style: solid;
20    border-color: #82cd47;
21    border-radius: 2vh;
22    transition: all 0.5s ease 0s;
23    line-height: 1.3;
24    min-width: 96PX;
25    font-size: 13px;
26    align-items: center;
27    justify-content: center;
28    flex-direction: column;
29    background-color: #82cd47;
30    top: 26px;
31    right: -105px;
32}
33#cart-k::before {
34    font-family: "Font Awesome 6 Free";
35    content: "\f217";
36    font-weight: 900;
37    color: #f6f6f6;
38    padding: 0px;
39    left: 0px;
40    top: auto;
41    RIGHT: auto;
42    font-size: 38px;
43}
44#cart-k:hover {
45    color: #fff;
46    background: #47cd9882;
47}
48/*ここから下は干渉できないcssで適応されているもの*/
49button, html [type="button"], [type="reset"], [type="submit"] {
50    -webkit-appearance: button;
51}
52.c-button, .c-button-submit {
53    font-family: inherit;
54    padding: 0.6em 1em;
55    border: 1px solid transparent;
56    text-decoration: none;
57    zoom: 1;
58    white-space: nowrap;
59    cursor: pointer;
60    -webkit-user-drag: none;
61     user-select: none;
62    box-sizing: border-box;
63}
64button, select {
65    text-transform: none;
66}
67button {
68    overflow: visible;
69}
70button, input, optgroup, select, textarea {
71    margin: 0;
72}
73ユーザー エージェント スタイルシート
74button {
75    writing-mode: horizontal-tb !important;
76    font-style: ;
77    font-variant-ligatures: ;
78    font-variant-caps: ;
79    font-variant-numeric: ;
80    font-variant-east-asian: ;
81    font-stretch: ;
82    text-rendering: auto;
83    letter-spacing: normal;
84    word-spacing: normal;
85    text-indent: 0px;
86    text-shadow: none;
87}
88body {
89    -webkit-font-smoothing: antialiased;
90    -webkit-text-size-adjust: 100%;
91    font-feature-settings: "palt";
92}
93html, body {
94    word-wrap: break-word;
95}
96style 属性 {
97    --vh: 4.11px;
98}
99<style>
100:host, :root {
101    --fa-style-family-classic: "Font Awesome 6 Free";
102    --fa-font-solid: normal 900 1em/1 "Font Awesome 6 Free";
103}
104<style>
105:host, :root {
106    --fa-font-regular: normal 400 1em/1 "Font Awesome 6 Free";
107}
108<style>
109:host, :root {
110    --fa-style-family-brands: "Font Awesome 6 Brands";
111    --fa-font-brands: normal 400 1em/1 "Font Awesome 6 Brands";
112}
113*, *::before, *::after {
114    box-sizing: border-box;
115}
116*, *::before, *::after {
117    box-sizing: border-box;
118}

■JavaScript※念のため

js
1      //商品ページのカートにスクロールを実装する
2     //指定エリア内に要素を追従させる関数（追従要素,追従エリア）
3   const areaFixedFunk = (fixedElm,fixedArea) => {
4    //関数呼び出し（追従要素,追従エリア）
5    areaFixedFunk('#cart-k', '.c-form');
6    //エリアチェック
7    const areas = document.querySelectorAll(fixedArea);
8    if(areas.length === 0) {
9      return;
10    }
11    //追従チェック関数
12    const checkFixed = (target,area) => {
13      //要素の位置と高さを取得
14      const startPosi = area.getBoundingClientRect().top;
15      const targetHeight = target.clientHeight;
16      const areaHeight = area.clientHeight;
17      const endPosi = startPosi + areaHeight;
18  
19      //エリア内の処理
20      if(0 > startPosi && targetHeight < endPosi) {
21        target.classList.add('is-fixed');
22        target.style.top = '';
23  
24      //エリアより上の処理
25      } else if(0 <= startPosi) {
26        target.classList.remove('is-fixed');
27        target.style.top = '';
28  
29      //エリアより下の処理
30      } else {
31        target.classList.remove('is-fixed');
32        //停止位置を設定
33        target.style.top = (areaHeight - targetHeight) + 'px';
34      }
35    }
36  
37    //エリア毎に処理
38    areas.forEach((area) => {
39      //エリア内に追従要素が存在する場合のみ処理する
40      const target = area.querySelector(fixedElm);
41      if(target) {
42        checkFixed(target,area);
43        window.addEventListener('resize', ()=> {
44          checkFixed(target,area);
45        });
46        window.addEventListener('scroll', ()=> {
47          checkFixed(target,area);
48        }, {passive: true});
49      }
50    });
51  }

ソースコードについて

●HTML
Bcartというシステムを利用しているため、干渉できないページのHTMLソースです。
Google chromeにてソースを表示したものを記載しております。
●css
干渉できないスタイルシートが存在するため、49行目以降はデベロッパーツールにて適応されていたスタイルをコピペしております。
●JavaScript
本件には直接関係する部分ではないと思いますが、念のための情報を記載いたします。

参考

現在、編集している商品ページです。
至らない点があると思いますので、ご覧いただけますと幸いです。
※エラーがでてしまいますので、大変お手数ですが、アドレスバーにコピペをお願いいたします。
https://kurimotokakou.i11.bcart.jp/product.php?id=2

行動規範の内容に同意します

回答1件

ツールの使いかたを理解できておらず、質問が重複してしまいました。
ご迷惑をお掛けし、大変申し訳ございません。
本質問で統一させていただきましたので、
引き続きどうぞよろしくお願いいたします。

投稿2023/03/06 06:01

編集2023/03/06 07:23

helpmee88

総合スコア4

m.ts10806

2023/03/06 07:00

質問は編集できるので投稿しなおす必要はないです。新たにたてた質問を削除依頼し、こちらの質問を「受付中」に戻して本回答も削除依頼されたほうが良いと思います。現状では「改めて質問する」という「回答」で「解決」というおかしなことになっています。

helpmee88

2023/03/06 07:47

ご指摘ありがとうございます。編集ボタンに気が付いておりませんでした。ご教授いただいた方法で質問を統一させていただきました。「本回答も削除依頼されたほうが良い」とのことで、お気遣いいただきましてありがとうございます。ただ、ヘルプにて確認をしたところ、「他のユーザーの質問や回答で削除すべきと思われる不適切な質問や回答、コメント等を見つけたら通報機能にてご連絡ください。」とのことでした。私の個人的な理由で申し訳ないのですが、せっかく教えてくださったことを「通報」という形をとるのは性格上大変心苦しく勇気が要ります。大変恐れ入りますが、このまま記載させていただいてもよろしいでしょうか？親切にしていただきまして大変ありがたく存じます。もし、よろしければ今後ともどうぞよろしくお願いいたします。

行動規範の内容に同意します