【CSSウィザード募集】position:fixed; しながら、スクロールバーの中に収めることは可能か？

Question

###実現したいこと
サンプルを見て頂くと早いのですが、

https://jsfiddle.net/zbhr67f1/

ご覧の通り、position:fixed; しているために、スクロール時にnavの幅がスクロールバーにかぶってしまいますよね。

これを防ぎ、navをスクロールバーの中に収めることは可能でしょうか？

###試したこと

::-webkit-scrollbarはFirefoxで使えませんし、

Firefoxに合わせてJSでnavの幅を17px減らすと今度はスマホでおかしくなりますし、

かなり困っています。

何か方法があったら教えて下さい。

宜しくお願い致します。

###JSFiddleのコード
情報が重複しますが、上のJSFiddleのコードはこちらです。

<main>

  <section class="sec1">
    <div class="sec1-header">header</div>
    <nav>nav</nav>
    <div class="sec1-content">
      <ul>
        <li>1</li><li>2</li><li>3</li>
      </ul>
    </div>
  </section>

  <section>

  </section>

  <section>

  </section>

</main>

ul,li {
  list-style: none;
  margin: 0;  
  padding: 0;
}
body {
  background: red;
  overflow-y: hidden;
  padding: 0;
  margin: 0;
}
main {
  display: flex;
  justify-content: space-between;
}
section {
  height: 100vh;
  width: 33%;
  background: khaki;
  overflow-y: scroll;
}
.sec1-header {
  background: palevioletred;
  height: 50px;
  margin: 0 0 5px 0;
  display: flex;
  justify-content: center;  
  align-items: center;
}
.sec1-content ul li {
  height: 300px;
  background: royalblue;
  margin: 5px 0 5px 0;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
}
nav {
  background: cadetblue;
  display: flex;
  justify-content: center;
  align-items: center;  
  height: 50px;
}
nav.is-fixed {
    position: fixed;
    top: 0px;
    z-index: 2;
    width: 33%;
}

$(function() {
  var $win = $('.sec1'),
      $main = $('.sec1-content'),
      $nav = $('.sec1 nav'),
      navHeight = $nav.outerHeight(),
      navPos = $nav.offset().top,
      fixedClass = 'is-fixed';

  $win.on('load scroll', function() {
    var value = $(this).scrollTop();
    if ( value > navPos ) {
      $nav.addClass(fixedClass);
      $main.css('margin-top', navHeight);
    } else {
      $nav.removeClass(fixedClass);
      $main.css('margin-top', '0');
    }
  });
});  

Answer 1

JS使わずに

nav {
    position: sticky;
    top:  0;
}

はダメなの？

Comments

[cuteboy]

そんな便利なプロパティ知りませんでした…。
ありがとうございます。

[退会済みユーザー]

モダンブラウザやスマホはのきなみ対応してるけど
IE非対応なのでIEで使いたい場合はpollyfillとか使わないとダメかも

[cuteboy]

みたいですね。まぁIEはスルーします。

あと入れ子だと効かなくなる場合はどうしたらよいでしょうか？
https://jsfiddle.net/mq1hfs84/

ご覧のように、5行目を
<div class="sec1-nav"><nav>nav</nav></div>
のように入れ子にすると効かず、

でも
<nav>nav</nav>
のように入れ子にしなければ効くんですよね…

[退会済みユーザー]

親の方につけるんじゃだめなの？
```
.sec1-nav {
position: sticky;
top: 0;
}
```

sticky は大前提として祖先からははみ出さない
その上で祖先の直近スクロール要素に対して top の位置をこえると fixed になるってものなので
親が画面外に消えるとそれについていきます
消えてほしくない親に十分なheightをとるか親をstickyかfixedにしないとダメかも

nav にだけ sticky つけて
```
.sec1-nav {
height: 50vh;
}
```
とかやれば挙動を感覚的につかめるかも

[cuteboy]

>親の方につけるんじゃだめなの？
入れ子の中を効かせたいんですよね。

>とかやれば挙動を感覚的につかめるかも
なるほど、こういうことですか。教え方上手。どうもありがとうございます。