position fixed内でスクロールさせたい

質問

css position fixed内でスクロールさせることは可能ですか？
下記のサイトのドロワーメニューのようにしたいです。
//www.toei-eigamura.com/edosakaba/

下記のようにしてもうまくいきませんでした。

・html
<nav>
<div id="nav__drawermenu-wrap">
<ul>
<li>
<a class='top-header__social-btn symbol animation-hover action-hover' href="https://plus.google.com/share?url=http:///index.html" onclick="window.open(this.href, 'Gwindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;" title='&#xe039;'></a>

<a class='top-header__social-btn symbol animation-hover action-hover' href="http://www.facebook.com/share.php?u=http:///index.html" onclick="window.open(this.href, 'FBwindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;" title='&#xe027;'></a>

<a class='top-header__social-btn symbol animation-hover action-hover' href="http://twitter.com/share?url=</a>
</li>
<li><a class="link-block" href="#js-about-me"><span class="gotootherpage"><img class="top-gnav__link-sixth__goto-other-page" src="img/common-img/goto-other-page.svg" alt="goto-other-page-image"></span>ABOUTME</a></li>
<li><a class="link-block" href="#js-gallary">GALLARY</a></li>
<li><a class="link-block" href="#js-gmap">MAP</a></li>
<li><a class="link-block" href="#js-contact">CONTACT</a></li>
<li><a class="link-block" href="http:///index.html">TOP</a></li>
<li><a class="link-block" href="http:///index.html">BLOG</a></li>
</ul>
</div>
</nav>

・ｃｓｓ
nav {
overflow: auto;
}

[id="drawermenu"] ul {
z-index: 300;
width: 100%;
height: 100%
position: fixed;
top: 0;
padding-top: 2.8rem;
text-align: center;
cursor: pointer;
margin-left: -100%;
transition-propety:all;
transition-duration:1s;
}

回答No.2

0wl · ベストアンサー

ごめん。質問を勘違いしていました。

position:fixedなら無理なのはいっしょです。
クリックする為のボタン、バーガーメニューはposition:fixedで、出現するmenuは、position: absolute;にすれば希望のことができると思います。

また、ソースを拝見しましたが、エラーが目立ちます。元のソースもこんな感じですか？
[id="drawermenu"] ul
なんで属性セレクタ？って気もしますがそれはおいておいて、今回このセレクタの適用を受ける要素はありませんので、すべて無駄です。

一応他のエラーも
「height: 100%
position: fixed;」
100%の後に;が無いので、
「height: 100% position: fixed;」と判断され、結果解釈できない筈です。
「<a class='top-header__social-btn symbol animation-hover action-hover' href="http://twitter.com/share?url=</a>
</li>」
<a>タグ内のがhref属性が閉じられていません。

お礼

バーガーメニューはposition:fixedで、出現するmenuは、
バーガーメニューにposition:relative;で基準にして、
position: absolute;で相対指定ということでしょうか？

ただ、バーガーメニューにposition:relative;をつける所にはfixdeがすでにありますが、バーガーに親要素のdivでもたしてそこにつけるのでしょうか？

＞[id="drawermenu"] ul
詳細度を上げないため

回答No.1

0wl

>css position fixed内でスクロールさせることは可能ですか？
不可能。

見本のサイトは、最初はfixedではなくposition: absoluteだから、動く。
ある地点を過ぎるとjsでpositionの値をfixedにして表示している。

お礼

無理なのですね。

するとドロワーのメニューが長くて、スマホを横にしたときに、
下のメニューが隠れてしまうことは、jsを使わないと解決できないのですね。
cssメソッドとクリックファンクションでポジションフィックスをクリック時にポジションアブソリュートに上書きしたら良いのですかね？