javascriptを実装したら、もともと付いていたclass・idが機能しなくなってしまいました

Question

サイドメニューの一部がスクロールに応じて付いて来る設定をjavascriptでしました。

設定したのはいいのですが、実装した要素のwidthが効かなくなり、広がり、また記事などがなくスクロールできない長さのページの場合、認識されずfooterを踏みつけ&footerの下にまで要素が繋がっています。（それなりの長さをもつ要素なので）

javascriptに使っているのはid="float-box"です。このid（とjavascriptのコード）がなければ、今まで通りのwidrhを保ち、footerも要素の下に配置されます。

main.php

<!--------------------略----------------------->
 <section class="col-sm-12 order-sm-3 sp-lg-4 order-lg-3" id="rightSidebarSection">
       <?php get_template_part("./template/mainSidebar"); ?>
 </section>
<!--------------------略----------------------->

mainSidebar.php

<div id="float-box">
<h2 class="mainSiderbarTitle">スクロールする要素</h2>

    <?php
        $args = array(
            'posts_per_page'   => 5,
            'meta_query' => array(
<!--------------------略----------------------->
　　　　  <?php endif;
        wp_reset_postdata();
        ?>
</div>　

<script type="text/javascript">
        var setBoxId = '#float-box';
        var scrollStart = null;
        var scrollEnd = null;
        var floatBoxTop = 10;
          $(document).ready(function() {
                scrollStart = $(setBoxId).offset().top;
                  scrollEnd    = $(document).height() - 1000
          })
          $(window).scroll(scroll)

           function scroll(){
                 var scrollTop = $(document).scrollTop() + floatBoxTop;
                 scrollTop = Math.min(scrollEnd, Math.max(scrollTop, scrollStart))
                 if(scrollTop === scrollStart ||  scrollEnd === scrollTop) {
                     $(setBoxId).css({
                         position:'absolute',
                         top: scrollTop
                     });
                   } else {
                       $(setBoxId).css({
                          position: 'fixed',
                          top: floatBoxTop
                       });
                   }
            }
</script>

#float-box{
    position: absolute;
}
#rightSidebarSection {
    border-left: 1px solid #efefef;
}

main.phpの<section class="col-sm-12 order-sm-3 sp-lg-4 order-lg-3" id="rightSidebarSection">のクラスとidを反映させたいです。

class="col-sm-12 order-sm-3 sp-lg-4 order-lg-3"に関しては、添付した写真の通りです。
このファイルがどういうものなのか、なぜ詰まっており、途中からいろが薄いのかなど理解しておりません。

どうしたら、反映させられるか、またどう調べたらいいか教えていただけたらと思います。

よろしくお願いします。

Comments

[kei344]

JavaScriptがどういう物なのかが書かれていません。公式配布サイトのURLを質問文に追記ください。（URLにはリンクを張ることができます）また、「javaのコード」と書かれていますが、「JavaScriptのコード」では。

[m.ts10806]

タグに「Wordpress」も追加したほうが良さそうです。

Answer 1

肝心の css のソースも必要では･･･ と思ったけど
これ bootstrap とか使っているのでしょうか。それの class が効いていないということ？
(col-sm-12 とかそれっぽいですが)

ぱっと見た感じだと、 $(setBoxId).css() で position:absolute; とか指定しているせいで崩れているのでは？と思いますが どうでしょうか。

id="rightSidebarSection" って col-*** とかが指定されている要素に指定しても平気でしょうか。
外側をさらに div で囲ってそこに id を指定する、とかの方が良さそうな気もしますが･･･ どうでしょうね
訂正：間違えました。追尾用の id は rightSidebarSection じゃなくて float-box ですね。上記は忘れてください。すみません。でもどちらにしても position:absolute とかのせいじゃないのかなあと思いますけども。わかりませんが。

動かしてみたりとかはしていないのでソースを見た感じですが。

Comments

[退会済みユーザー]

回答ありがとうございます。css追加させていただきました。恥ずかしながらbootstrapを初めて耳にしました。　添付の写真のcssが「bootstrap」を使っているということでしょうか？　　いただいたアドバイスの通り、 $(setBoxId).css() のposition:absolute; を外してみた結果、footerの近くまで要素がおりてきたあとに、消えてしまいました。

[sk_3122]

bootstrap というのは CSS フレームワークというものですね。
普通は css をゼロから自分で書かなければいけないところを、bootstrap.css などのファイルを読み込めば、「col-sm-12 のようなクラスが最初から用意されているので それを使うだけでレスポンシブなサイトが作れるよ」というようなものです。

bootstrap.css みたいな名前のファイルを読み込んでいれば、「bootstrap を利用している」状態だと思います。

レイアウトが崩れてしまうのは position:absolute; のせいじゃないかと思いますが、「サイドメニューが追尾してくる」機能としては必要なコードだと思うので、ただ position:absolute を消せばよいという話でもないのかなと思います。
kei344 さんの回答とかを試してみるとどうなるでしょうか

[sk_3122]

<section> の中にもう一枚 div を挟んで、サイドバーとしての指定はそっちに移す、
追尾用の id="float-box" は <section> に指定する、
とかでどうかなと思いましたが、いや でも order-sm-3 とかも指定してあるしどうなんだろう･･･ 他の要素との兼ね合いとか･･･ とか

「必要な部分だけ抜き出した、それだけコピペすれば動くソース」があれば回答も付きやすいと思いますが、一部のソースだけ抜粋だと 実際に試してみることができないのでちょっと難しいですね･･･ うーん

[退会済みユーザー]

遅くなりました。
bootstrapの説明ありがとうございます。
「<section> の中にもう一枚 div を挟んで、サイドバーとしての指定はそっちに移す、
追尾用の id="float-box" は <section> に指定する」は、追尾して来なくなってしまいました。

「必要な部分だけ抜き出した、それだけコピペすれば動くソース」確かにおっしゃる通りです。今後、その点を意識しようと思います。

Answer 2

横幅は下記CSSを追加。

#rightSidebarSection {
   position: relative;
}
#float-box {
   width: 100%;
}

---

「スクロールできない長さ」についてはウィンドウサイズとフロートしている要素の高さを比べてイベント登録自体をやめてしまえばよいのでは。

【ウィンドウサイズの取得 - Qiita】
https://qiita.com/butchi_y/items/daf64a664b80e0e0e31a

Comments

[退会済みユーザー]

追記アドバイスと回答ありがとうございます。後出しながらcssを追加させていただきました。
横幅に関して、アドバイスに従ったところ、着地した（スクロール終わり）ときと出発点（スクロール始丸まで）は正しいサイズですが、スクロール中は、広がったままです。その他、要素の元のいち（出発点）が下に下がる、footer手前で止まらず、footerに被さり追い抜かすなどの問題も出てきてしまいました。

「スクロールできない長さ」についてはウィンドウサイズとフロートしている要素の高さを比べてイベント登録自体をやめてしまえばよいのでは。
に関しては、勉強不足により実装できていません。

[kei344]

ああ、position: 'fixed'になるからか。それではJavaScriptで #rightSidebarSection の幅を取って #float-box のwidthに設定するとか。

もしJavaScriptが不得手なら、改修を考えず他の「スクロールに追随する」ライブラリを探してみては？

[sk_3122]

bootstrap は「画面サイズが大きい時は普通のレイアウトで、画面サイズが小さくなったらスマホ用のレイアウトにする」みたいなレスポンシブデザインに対応しているので、bootstrap を想定していない css や javascript と組み合わせると上手くいかない事が結構あるのですよね。

なので javascript などを探す場合も「bootstrap に対応しているもの」を探す必要があります。
そうでないものを使いたい、となると自分で色々修正しないといけないので javascript の知識が必要になってきますね･･･

[退会済みユーザー]

bootstrapに対応するjavascriptですか…。今回のjavascriptのコードも自力ではできずにteratailの質問で回答してくださった方のコードなのです。　

ライブラリを探しつつ、もうすこし勉強しようと思います。

解決には至りませんでしたが、原因がわかったこと、探すべきものが明確になったこと
とても感謝しております。

ありがとうございました。