【css】サイドバーを内部スクロールかつ、position: stickyを適用させたい

やりたいこと

以下のようなhtmlで、
サイドバーには

画面の高さ100％
position: stickyのように固定
overflow-y: scrollを適用

を適用させたい

  <header class="l-header">header</header>

  <div class="l-container">
    <aside class="l-sidebar">
      <div class="l-sidebar__inner">
        <ul>
          <li class="l-sidebar__item">menu</li>
          <li class="l-sidebar__item">menu</li>
          <li class="l-sidebar__item">menu</li>
          <li class="l-sidebar__item">menu</li>
          <li class="l-sidebar__item">menu</li>
          <li class="l-sidebar__item">menu</li>
          <li class="l-sidebar__item">menu</li>
          <li class="l-sidebar__item">menu</li>
          <li class="l-sidebar__item">menu</li>
          <li class="l-sidebar__item">menu</li>
          <li class="l-sidebar__item">menu</li>
          <li class="l-sidebar__item">menu</li>
        </ul>
      </div>
    </aside>
    <main class="l-main">
      <p>text</p><p>text</p><p>text</p><p>text</p><p>text</p>
      <p>text</p><p>text</p><p>text</p><p>text</p><p>text</p>
      <p>text</p><p>text</p><p>text</p><p>text</p><p>text</p>
      <p>text</p><p>text</p><p>text</p><p>text</p><p>text</p>
      <p>text</p><p>text</p><p>text</p><p>text</p><p>text</p>
      <p>text</p><p>text</p><p>text</p><p>text</p><p>text</p>
      <p>text</p><p>text</p><p>text</p><p>text</p><p>text</p>
      <p>text</p><p>text</p><p>text</p><p>text</p><p>text</p>
      <p>text</p><p>text</p><p>text</p><p>text</p><p>text</p>
    </main>
  </div>

  <footer class="l-footer">footer</footer>


.l-header,
.l-footer
  color: #fff
  text-align: center
  height: 50px
  line-height: 50px
  background-color: #333

.l-container
  display: flex

.l-sidebar
  width: 250px
  min-width: 250px
  height: 100%
  &__inner
    width: 250px
    min-width: 250px
    height: 100%
    position: fixed
    top: 50px
    left: 0
    overflow-y: scroll
    background-color: #f00
  &__item
    padding: 20px

.l-main
  width: calc(100% - 250px)
  background-color: #eee

上記のhtmlとsassでの問題点

スクロールしたら、サイドバーの上に隙間が空いてしまう（ヘッダーの高さ分、topで下にずらしているから）
下までスクロールしたら、fixedで固定している箇所（左側）がフッターの上に来てしまう

試したこと

position: stickyとoverflow-y: scrollの共存が不可能（親にposition、子にoverflowでも無理）だった
stickyではなくfixedで固定させようとしたら、下までスクロールした時にフッターの上にかぶってしまい、フッターが一部隠れてしまう
サイドバーに背景色がついているから、高さを100%にしなければフッターとサイドバーとの空間に隙間が空いているように見えてしまう（vh100％など試してみたが駄目だった）

s8_chu

2019/01/10 09:30

現状の CSS を追記していただけませんか？

退会済みユーザー

2019/01/11 02:06

サンプルを追記しました！よろしくお願い致します。

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

回答2件

ベストアンサー

s8_chu

2019/01/13 23:48

回答するほど自信がないので、この回答にコメントします(ごめんなさい)。
こんな感じでしょうか？
https://codepen.io/anon/pen/rooeWg

s8_chu様のコメントで無事解決いたしました。

投稿2019/01/22 02:14

退会済みユーザー

総合スコア0

このような構造ではどうでしょうか？

html
1<!doctype html>
2<html>
3<head>
4  <meta charset="UTF-8">
5  <title>sample</title>
6</head>
7<body>
8  <main>
9    <article>
10      <header>
11        <h1>header</h1>
12      </header>
13      <div class="content">
14        <section>
15          section-1
16        </section>
17        <section>
18          section-2
19        </section>
20        <section>
21          section-3
22        </section>
23      </div>
24    </article>
25    <aside>
26      <div class="inner">
27        sidebar
28      </div>
29    </aside>
30  </main>
31  <footer>
32    footer
33  </footer>
34</body>
35</html>
36

css
1* {
2  margin: 0;
3  padding: 0;
4}
5
6main {
7  display: flex;
8}
9
10article {
11  background: #afafaf;
12  flex: auto;
13}
14
15header {
16  background: #00f;
17  width: 100%;
18  height: 100px;
19}
20
21section {
22  border: 5px solid #000;
23  height: 200px;
24  margin-bottom: 10px;
25}
26
27aside {
28  background: #f00;
29  width: 200px;
30  height: 1000px;
31  overflow-y: scroll;
32}
33
34.inner {
35  background: #fff;
36  height: 1200px;
37  margin: 50px 10px;
38}
39
40footer{
41  background: #ccc;
42  width: 100%;
43  height: 100px;
44}
45

修正

jquery使える場合、これでどうでしょうか？

html
1<!doctype html>
2<html>
3<head>
4  <meta charset="UTF-8">
5  <title>sample</title>
6  <link rel="stylesheet" href="ファイル名.css">
7  <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.4.min.js"></script>
8</head>
9<body>
10  <header>
11    <h1>header</h1>
12  </header>
13  <main>
14    <aside>
15      <div class="inner">
16        sidebar
17      </div>
18    </aside>
19    <article>
20      <div class="content">
21        <section>
22          section-1
23        </section>
24        <section>
25          section-2
26        </section>
27        <section>
28          section-3
29        </section>
30        <section>
31          section-4
32        </section>
33      </div>
34    </article>
35  </main>
36  <footer>
37    footer
38  </footer>
39  <script>
40(function() {
41  var asideHeight = $('aside').outerHeight();
42
43 $(window).scroll(function() {
44   var scroll = $(window).scrollTop();
45   var footerTop = $('footer').offset().top;
46   var windowHeight = $(window).height();
47
48   if (scroll <= 50) {
49     $('aside').css({
50       top:50 - scroll,
51       height:asideHeight + scroll
52     });
53   }
54
55   if(scroll >= footerTop - windowHeight) {
56     $('aside').css({height:windowHeight - scroll + footerTop - windowHeight});
57   }
58
59 })
60
61})();
62</script>
63
64</body>
65</html>

css
1* {
2  margin: 0;
3  padding: 0;
4}
5
6html,body {
7  height: 100%;
8}
9
10main {
11  display: flex;
12}
13
14article {
15  background: #afafaf;
16  width: calc(100% - 250px);
17  margin-left: 250px;
18}
19
20header {
21  background: #00f;
22  width: 100%;
23  height: 50px;
24}
25
26section {
27  border: 5px solid #000;
28  height: 200px;
29  margin-bottom: 10px;
30}
31
32aside {
33  background: #f00;
34  width: 250px;
35  height: calc(100% - 50px);
36  position: fixed;
37  top: 50px;
38  bottom: 50px;
39  overflow-y: scroll;
40}
41
42.inner {
43  background: #fff;
44  height: calc(100% + 200px);
45  margin: 50px 10px;
46}
47
48footer{
49  background: #333;
50  width: 100%;
51  height: 50px;
52}