JavaScript(Bootstrap)でスクロールに追尾するサイドバーの作成

Bootstrap3で固定サイドバーを使用する

上記のサイトを参考に、以下の3つのファイルを作成し、同じディレクトリに入れました。(スクロールした画面の位置によってサイドバーの文字の色が変わるなどは不要です。また、html内に<p>長いコンテンツ</p>と書いたのは、行数を稼ぐためだけのものです。)

やりたいことが2つあります。

メインコンテンツとサイドバーの枠線が重なっているので、重ならないように間に隙間を入れたいです。(marginを使おうとして失敗しました。)
スクロールするとサイドバーの文字は付いてくるのですが、枠線が消えてしまうので、cssの内容がスクロール後も残るようにしたいです。

回答よろしくお願いします。

html
1<html>
2<head>
3<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
4<link rel="stylesheet" type="text/css" href="test.css?<?php echo filemtime("./test.css");?>" media="all">
5<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
6</head>
7
8<body>
9<header>header</header>
10<div class="container"><div class="row">
11	<div class="main-container col-xs-9 col-xs-push-3" role="main">
12	<p>長いコンテンツ</p><p>長いコンテンツ</p><p>長いコンテンツ</p><p>長いコンテンツ</p><p>長いコンテンツ</p><p>長いコンテンツ</p>
13	<p>長いコンテンツ</p><p>長いコンテンツ</p><p>長いコンテンツ</p><p>長いコンテンツ</p><p>長いコンテンツ</p><p>長いコンテンツ</p>
14	<p>長いコンテンツ</p><p>長いコンテンツ</p><p>長いコンテンツ</p><p>長いコンテンツ</p><p>長いコンテンツ</p><p>長いコンテンツ</p>
15	<p>長いコンテンツ</p><p>長いコンテンツ</p><p>長いコンテンツ</p><p>長いコンテンツ</p><p>長いコンテンツ</p><p>長いコンテンツ</p>
16	<p>長いコンテンツ</p><p>長いコンテンツ</p><p>長いコンテンツ</p><p>長いコンテンツ</p><p>長いコンテンツ</p><p>長いコンテンツ</p>
17	</div>
18	
19	<div class="side-container col-xs-3 col-xs-pull-9" role="complementary">
20	<nav class="new-sidebar">サイドバー<br>
21	サイドバー</nav>
22	</div>
23</div></div>
24<footer>footer</footer>
25<script src="https://code.jquery.com/jquery-3.1.0.slim.min.js"></script>
26<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
27<script src="test.js"></script>
28</body>
29</html>

css
1.new-sidebar.affix {
2    position: fixed;
3    top: 20px;
4}
5
6.new-sidebar.affix-bottom {
7    position: absolute;
8}
9
10.main-container {
11	border-style: solid;
12    border-width: 4px 1px 4px 1px;
13    border-color: #0000a0;
14    padding: 0em 0.7em;
15}
16
17.side-container {
18	border-style: solid;
19    border-width: 4px 1px 4px 1px;
20    border-color: #000060;
21    padding: 0.3em 0.7em;
22}

javascript
1(function(window, $) {
2    'use strict';
3    $(function() {
4		// スクロール位置と連動させない場合は不要(scrollspy用)
5		//$(document.body).scrollspy({ target: '.new-sidebar' });
6
7		// スクロール位置と連動させない場合は不要(scrollspy用)
8		//$(window).on('load', function() { $(document.body).scrollspy('refresh') });
9
10		// 固定サイドバーのスクロール追従開始＆終了位置の設定(affix用)
11		setTimeout(function() {
12			$('.new-sidebar').affix({
13				offset: {
14					top: function() {
15						return (this.top = $('header').outerHeight(true));
16					},
17					bottom: function() {
18						return (this.bottom = $('footer').outerHeight(true));
19					}
20				}
21			})
22		}, 100);
23    });
24})(window, jQuery);

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

回答1件

ベストアンサー

＞2.スクロールするとサイドバーの文字は付いてくるのですが、枠線が消えてしまうので～
スクリプト側で.new-sidebarが画面に付いてくるように記述していますが、枠線は親の.side-containerにつけているので付いてきていないだけではないでしょうか。
.new-sidebarに枠線をつければいいとおもいます。
.new-sidebarに枠線を付けた上で.side-containerとの間に隙間を開ければ
＞1.メインコンテンツとサイドバーの枠線が重なっているので～
こちらも解決するのではないでしょうか。
スクロール時にサイドバーの幅がずれてしまうかもしれませんが、サイドバーが追尾時にposition:fixedになる関係で、スクリプトで幅を指定しない限りちょうどいい大きさにはならないと思います。
というわけで以下のように修正してみました。
幅を変更した際はそれに合わせてサイドバーの幅を指定する処理が必要になるはずです。

html
1<html>
2<head>
3<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
4<link rel="stylesheet" type="text/css" href="test.css" media="all">
5<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
6</head>
7
8<body>
9<header>header</header>
10<div class="container"><div class="row">
11    <div class="main-container col-xs-9 col-xs-push-3" role="main">
12    <p>長いコンテンツ</p><p>長いコンテンツ</p><p>長いコンテンツ</p><p>長いコンテンツ</p><p>長いコンテンツ</p><p>長いコンテンツ</p>
13    <p>長いコンテンツ</p><p>長いコンテンツ</p><p>長いコンテンツ</p><p>長いコンテンツ</p><p>長いコンテンツ</p><p>長いコンテンツ</p>
14    <p>長いコンテンツ</p><p>長いコンテンツ</p><p>長いコンテンツ</p><p>長いコンテンツ</p><p>長いコンテンツ</p><p>長いコンテンツ</p>
15    <p>長いコンテンツ</p><p>長いコンテンツ</p><p>長いコンテンツ</p><p>長いコンテンツ</p><p>長いコンテンツ</p><p>長いコンテンツ</p>
16    <p>長いコンテンツ</p><p>長いコンテンツ</p><p>長いコンテンツ</p><p>長いコンテンツ</p><p>長いコンテンツ</p><p>長いコンテンツ</p>
17    </div>
18
19    <div id="side" class="side-container col-xs-3 col-xs-pull-9" role="complementary">
20    <nav class="new-sidebar">サイドバー<br>
21    サイドバー</nav>
22    </div>
23</div></div>
24<footer>footer</footer>
25<script src="https://code.jquery.com/jquery-3.1.0.slim.min.js"></script>
26<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
27<script src="test.js"></script>
28</body>
29</html>

javascript
1(function(window, $) {
2
3    'use strict';
4    $(function() {
5
6        $('.new-sidebar').width($('.new-sidebar').parent().width());
7
8        // スクロール位置と連動させない場合は不要(scrollspy用)
9        //$(document.body).scrollspy({ target: '.new-sidebar' });
10
11        // スクロール位置と連動させない場合は不要(scrollspy用)
12        //$(window).on('load', function() { $(document.body).scrollspy('refresh') });
13
14        // 固定サイドバーのスクロール追従開始＆終了位置の設定(affix用)
15        setTimeout(function() {
16            $('.new-sidebar').affix({
17                offset: {
18                    top: function() {
19                        return (this.top = $('header').outerHeight(true));
20                    },
21                    bottom: function() {
22                        return (this.bottom = $('footer').outerHeight(true));
23                    }
24                }
25            })
26        }, 100);
27    });
28})(window, jQuery);

css
1.new-sidebar.affix {
2    position: fixed;
3    top:0px;
4}
5
6.new-sidebar.affix-bottom {
7    position: absolute;
8}
9
10.main-container {
11    border-style: solid;
12    border-width: 4px 1px 4px 1px;
13    border-color: #0000a0;
14    padding: 0em 0.7em;
15}
16
17.new-sidebar {
18    border-style: solid;
19    border-width: 4px 1px 4px 1px;
20    border-color: #0000a0;
21}

投稿2017/01/12 05:59

編集2017/01/12 06:06

koronatail

総合スコア433

katsukihi

2017/01/13 08:09

返信が遅くなり、また、一度ベストアンサーにしておいて申し訳ないのですが、画面(ブラウザ)の横幅を変えてもサイドバーが細くならないという状態になりました。横幅を変えてもうまく合わせてくれることを期待して、bootstrapを使ったので、この問題が起こらない解決方法はないでしょうか？

koronatail

2017/01/13 11:15

回答にも書いたとおり質問にあるリンク元のやり方でいくのであればスクリプトで幅を調整するしかないと思います。 $(window).resize(function () { 　$('.new-sidebar').width($('.new-sidebar').parent().width()); }); こんな感じのを追記すれば幅があうはずです。どうしてもそれが嫌だというのであれば、最初の回答で追記した幅を指定する$('.new-sidebar')～の行を消した上で、.new-sidebarに幅を指定せずに left: ～%; right: ～%; を指定すれば、ウィンドウサイズと相対的な幅を指定できますが、これはこれでbootstrapとの兼ね合いで％の値を微調整する必要があると思うのでその辺は調整していただければと思います。

katsukihi

2017/01/18 01:51

すみません、Javascriptは初心者なので、返信で質問した部分も、最初の回答のスクリプトに含まれていると勘違いしていました。ありがとうございます。

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