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

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

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

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

HTML

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

CSS

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

Q&A

解決済

2回答

2471閲覧

BootstrapでScrollspyの実装

退会済みユーザー

退会済みユーザー

総合スコア0

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

HTML

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

CSS

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

0グッド

1クリップ

投稿2020/03/19 08:54

Bootstrapでこの例と同様のScrollspyを制作しているのですが、上手くいきません。

読み込めていないソースコードがあるのでしょうか?

#該当のソースコード

HTML

1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>Document</title> 7 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> 8</head> 9<body> 10 11 <div id="list-example" class="list-group"> 12 <a class="list-group-item list-group-item-action" href="#list-item-1">Item 1</a> 13 <a class="list-group-item list-group-item-action" href="#list-item-2">Item 2</a> 14 <a class="list-group-item list-group-item-action" href="#list-item-3">Item 3</a> 15 <a class="list-group-item list-group-item-action" href="#list-item-4">Item 4</a> 16 <a class="list-group-item list-group-item-action" href="#list-item-4">Item 5</a> 17 <a class="list-group-item list-group-item-action" href="#list-item-4">Item 6</a> 18 <a class="list-group-item list-group-item-action" href="#list-item-4">Item 7</a> 19 </div> 20 <div data-spy="scroll" data-target="#list-example" data-offset="0" class="scrollspy-example"> 21 <h4 id="list-item-1">Item 1</h4> 22 <p>ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</p> 23 <h4 id="list-item-2">Item 2</h4> 24 <p>ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</p> 25 <h4 id="list-item-3">Item 3</h4> 26 <p>ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</p> 27 <h4 id="list-item-4">Item 4</h4> 28 <p>ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</p> 29 <h4 id="list-item-5">Item 5</h4> 30 <p>ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</p> 31 <h4 id="list-item-6">Item 6</h4> 32 <p>ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</p> 33 <h4 id="list-item-7">Item 7</h4> 34 <p>ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</p> 35 36 </div> 37 38 39 <!-- JavaScript --> 40 <script> 41 $('body').scrollspy({ target: '#navbar-example' }) 42 </script> 43 <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script> 44 <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> 45 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script> 46</body> 47</html>

#結果

イメージ説明

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

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

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

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

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

guest

回答2

0

ベストアンサー

Scrollspyのドキュメントの理解は、初心者には難しいと思います。
まずBootstrapを使い慣れているひと前提で、必要な最低限のコードだけしか提示してません。

①まず最初に、

$('body').scrollspy({ target: '#navbar-example' })

がJqueryやBootStrapのjsファイルが読み込まれる前に実行されてしまっているので、エラーになっています。順番的にJqueryやBootStrapのscriptタグのあとにもってきてください。

②①で順番を云々書いたものの、実はT-yamadaさんの書き方は、ドキュメントの「Via data attributes」で説明されているもので、javascriptでscrollspy()を使わなくても、画面ロード時にdata-xxxx属性を付けておくことで自動でscrollspyが生成されるやり方です。
なので、

$('body').scrollspy({ target: '#navbar-example' })

をする必要はありません。data-xxxx属性を使わずにあるタグにscrollspyを付与したいなどの場合にこの方法を使います。

③ドキュメントのサンプルでは横並びになっているのに、提示されたコードでは縦並びになってしまっていのはサンプルにはBootstrapを利用している人には説明要らないよねって感じで"row"と"col"を使ったグリッドで分割しているコードがはしょられてます。

④横並びにしたあとに左右を同じ高さに揃えるCSSについても省略しているので、そこもサンプルは親切ではないですね。正直これに関してはブラウザの開発者モードで調べるしかないかも。(.scrollspy-example)

以上を踏まえたコードです

HTML

1<!DOCTYPE html> 2<html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>Document</title> 7 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> 8 </head> 9 <body> 10 <style> 11.scrollspy-example { 12 position: relative; 13 height: 200px; 14 margin-top: .5rem; 15 overflow: auto; 16} 17 </style> 18 <div class="row"> 19 <div class="col-4"> 20 <div id="list-example" class="list-group"> 21 <a class="list-group-item list-group-item-action active" href="#list-item-1">Item 1</a> 22 <a class="list-group-item list-group-item-action" href="#list-item-2">Item 2</a> 23 <a class="list-group-item list-group-item-action" href="#list-item-3">Item 3</a> 24 <a class="list-group-item list-group-item-action" href="#list-item-4">Item 4</a> 25 </div> 26 </div> 27 <div class="col-8"> 28 <div data-spy="scroll" data-target="#list-example" data-offset="0" class="scrollspy-example"> 29 <h4 id="list-item-1">Item 1</h4> 30 <p>Ex consequat commodo adipisicing exercitation aute excepteur occaecat ullamco duis aliqua id magna ullamco eu. Do aute ipsum ipsum ullamco cillum consectetur ut et aute consectetur labore. Fugiat laborum incididunt tempor eu consequat enim dolore proident. Qui laborum do non excepteur nulla magna eiusmod consectetur in. Aliqua et aliqua officia quis et incididunt voluptate non anim reprehenderit adipisicing dolore ut consequat deserunt mollit dolore. Aliquip nulla enim veniam non fugiat id cupidatat nulla elit cupidatat commodo velit ut eiusmod cupidatat elit dolore.</p> 31 <h4 id="list-item-2">Item 2</h4> 32 <p>Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex nulla tempor. Laborum consequat non elit enim exercitation cillum aliqua consequat id aliqua. Esse ex consectetur mollit voluptate est in duis laboris ad sit ipsum anim Lorem. Incididunt veniam velit elit elit veniam Lorem aliqua quis ullamco deserunt sit enim elit aliqua esse irure. Laborum nisi sit est tempor laborum mollit labore officia laborum excepteur commodo non commodo dolor excepteur commodo. Ipsum fugiat ex est consectetur ipsum commodo tempor sunt in proident.</p> 33 <h4 id="list-item-3">Item 3</h4> 34 <p>Quis anim sit do amet fugiat dolor velit sit ea ea do reprehenderit culpa duis. Nostrud aliqua ipsum fugiat minim proident occaecat excepteur aliquip culpa aute tempor reprehenderit. Deserunt tempor mollit elit ex pariatur dolore velit fugiat mollit culpa irure ullamco est ex ullamco excepteur.</p> 35 <h4 id="list-item-4">Item 4</h4> 36 <p>Quis anim sit do amet fugiat dolor velit sit ea ea do reprehenderit culpa duis. Nostrud aliqua ipsum fugiat minim proident occaecat excepteur aliquip culpa aute tempor reprehenderit. Deserunt tempor mollit elit ex pariatur dolore velit fugiat mollit culpa irure ullamco est ex ullamco excepteur.</p> 37 </div> 38 </div> 39 </div> 40 <!-- JavaScript --> 41 <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script> 42 <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> 43 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script> 44 </body> 45</html>

投稿2020/03/19 10:29

storm3

総合スコア328

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

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

退会済みユーザー

退会済みユーザー

2020/03/19 10:45

こんばんは。ご回答ありがとうございます。 >②①で順番を云々書いたものの、実はT-yamadaさんの書き方は、ドキュメントの「Via data attributes」で説明されているもので、javascriptでscrollspy()を使わなくても、画面ロード時にdata-xxxx属性を付けておくことで自動でscrollspyが生成されるやり方です。 id属性を指定するだけで記述しなくても良い点はまだお恥ずかしいながら、無知でしたのでとても参考になりました。Bootstrapはここまで便利なんですね。。 提示してみたコードを実行したところ、想定している通りの実装となりました。ありがとうございます。 ここら辺の説明に関しては「Via data attributes」を参照した方が良いのでしょうか?
storm3

2020/03/19 16:25

>ここら辺の説明に関しては「Via data attributes」を参照した方が良いのでしょうか? たしかに読むに越したことはないですが、こちらのサイトが日本語でわかりやすかも http://www.tohoho-web.com/bootstrap/scrollspy.html#section-3 HTMLタグだけでscrollspyを有効化するか、Jascript側から指定したタグに対してscrollspyを有効化するかは使い方次第です。 どちらでscrollspyを生成しても同じですが、仕事柄、動的なWebページを作る場合はJavascriptで操作するほうが多いですかね。 仮に今回のものをdata属性からjavascriptに書き換えた場合 <div data-spy="scroll" data-target="#list-example" data-offset="0" class="scrollspy-example"> ↓ <div class="scrollspy-example"> こうするとdata-spy="scroll"が消えたことでspyscrollが作られず 右のスクロールを上下させて見出しを変えても、左のリストが連動しなくなります。また左のリストをクリックしてもクリックしたとこの色が変わらなくなります。 次にこの状態でjQuery、bootstrapのscriptタグのあとに下記のscriptを追加。 <script> $('.scrollspy-example').scrollspy({ target:'#list-example', offset:0 }); </script> javascriptから<div class="scrollspy-example">タグに対してspyscrollを付与します。 どっちでも結果は同じですので、どちらでもお好きなほうで。
退会済みユーザー

退会済みユーザー

2020/03/20 06:36

ご返信ありがとうございます。 提示してもらったサイトを参考に進めてみます。ありがとうございます。
guest

0

グリッドシステム等を使って体裁を整える必要があるのと、
spyのターゲット自身がスクロールできるようになっていること、
また

<script> $('body').scrollspy({ target: '#navbar-example' }) </script>

こちらの部分をjqueryを読み込んだあとかつ、
正しいターゲットのセレクタを指定する必要があるみたいですね。

以下を適当なエディタにコピーしブラウザで開くと動作するかと思います。

HTML

1<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> 2<style> 3 body { 4 position: relative; 5 } 6</style> 7 8<div class="container"> 9 <div class="bd-example"> 10 <div class="row"> 11 <div class="col-4"> 12 <div id="list-example" class="list-group"> 13 <a class="list-group-item list-group-item-action active" href="#list-item-1">Item 1</a> 14 <a class="list-group-item list-group-item-action" href="#list-item-2">Item 2</a> 15 <a class="list-group-item list-group-item-action" href="#list-item-3">Item 3</a> 16 <a class="list-group-item list-group-item-action" href="#list-item-4">Item 4</a> 17 </div> 18 </div> 19 <div class="col-8" > 20 <div style="height:200px; overflow:scroll" data-spy="scroll" data-target="#list-example" data-offset="0" class="scrollspy-example" id="scrollspy-example"> 21 <h4 id="list-item-1">Item 1</h4> 22 <p>Ex consequat commodo adipisicing exercitation aute excepteur occaecat ullamco duis aliqua id magna ullamco eu. Do aute ipsum ipsum ullamco cillum consectetur ut et aute consectetur labore. Fugiat laborum incididunt tempor eu consequat enim dolore proident. Qui laborum do non excepteur nulla magna eiusmod consectetur in. Aliqua et aliqua officia quis et incididunt voluptate non anim reprehenderit adipisicing dolore ut consequat deserunt mollit dolore. Aliquip nulla enim veniam non fugiat id cupidatat nulla elit cupidatat commodo velit ut eiusmod cupidatat elit dolore.</p> 23 <h4 id="list-item-2">Item 2</h4> 24 <p>Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex nulla tempor. Laborum consequat non elit enim exercitation cillum aliqua consequat id aliqua. Esse ex consectetur mollit voluptate est in duis laboris ad sit ipsum anim Lorem. Incididunt veniam velit elit elit veniam Lorem aliqua quis ullamco deserunt sit enim elit aliqua esse irure. Laborum nisi sit est tempor laborum mollit labore officia laborum excepteur commodo non commodo dolor excepteur commodo. Ipsum fugiat ex est consectetur ipsum commodo tempor sunt in proident.</p> 25 <h4 id="list-item-3">Item 3</h4> 26 <p>Quis anim sit do amet fugiat dolor velit sit ea ea do reprehenderit culpa duis. Nostrud aliqua ipsum fugiat minim proident occaecat excepteur aliquip culpa aute tempor reprehenderit. Deserunt tempor mollit elit ex pariatur dolore velit fugiat mollit culpa irure ullamco est ex ullamco excepteur.</p> 27 <h4 id="list-item-4">Item 4</h4> 28 <p>Quis anim sit do amet fugiat dolor velit sit ea ea do reprehenderit culpa duis. Nostrud aliqua ipsum fugiat minim proident occaecat excepteur aliquip culpa aute tempor reprehenderit. Deserunt tempor mollit elit ex pariatur dolore velit fugiat mollit culpa irure ullamco est ex ullamco excepteur.</p> 29 </div> 30 </div> 31 </div> 32 </div> 33</div> 34 35<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script> 36<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> 37<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script> 38<script> 39 $('#scrollspy-example').scrollspy({ target: '#list-example' }); 40</script> 41

投稿2020/03/19 10:30

kokemomo.sour

総合スコア330

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問