質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.45%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

1回答

811閲覧

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

helpmee88

総合スコア4

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2023/03/06 05:55

編集2023/03/06 08:19

実現したいこと

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

前提

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

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

内容

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

該当のソースコード

■HTML

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

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

投稿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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.45%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問