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

下記のサイトのドロワーメニューのようにしたいです。
//www.toei-eigamura.com/edosakaba/

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

・html

</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=":///index.html">TOP</a></li> <li><a class="link-block" href=":///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;
}

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

回答2件

ベストアンサー

HTMLにid="drawermenu"が無いためにCSSが適用されていないだけではないでしょうか。

それとも、もしかすると属性セレクタを部分一致で適用させたいのでしょうか？
もしそうであれば[id*="drawermenu"] ulとする必要があります。
しかし、そもそも属性セレクタを使用する意味が無いように見えるので、素直に#drawermenu ulとした方が良いです。

それと、BEMだとするとBlockとElementが滅茶苦茶なのが気になりますが、もしBEMを採用しているのであれば、マークアップを根本から見直して子孫セレクタなどを極力使用しないようにした方が良いと思います。

追記
ipadcaronさんと特に変わりない内容ですが、一応サンプルを載せておきます。
さらに追記
一部修正しました。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4<meta charset="utf-8">
5<title>example</title>
6<meta http-equiv="X-UA-Compatible" content="IE=edge">
7<meta name="viewport" content="width=device-width, initial-scale=1.0">
8<style type="text/css">
9html,
10body {
11  height: 100%;
12}
13
14.nav {
15  overflow-y: auto;
16  position: absolute;
17  top: 0; right: 0; bottom: 0; left: 0;
18  z-index: 9999;
19  box-sizing: border-box;
20  background: rgba(0,0,0,.8);
21  color: #fff;
22}
23
24.nav__social__list-item,
25.nav__menu__list-item {
26  padding: 50px;
27}
28</style>
29</head>
30<body>
31<nav class="nav">
32  <ul class="nav__social">
33    <li class="nav__social__list-item"><a class="nav__social__list-item__link" href="">Google+</a></li>
34    <li class="nav__social__list-item"><a class="nav__social__list-item__link" href="">Facebook</a></li>
35    <li class="nav__social__list-item"><a class="nav__social__list-item__link" href="">Twitter</a></li>
36  </ul>
37
38  <ul class="nav__menu">
39    <li class="nav__menu__list-item"><a class="nav__menu__list-item__link" href="">ABOUT ME</a></li>
40    <li class="nav__menu__list-item"><a class="nav__menu__list-item__link" href="">GALLERY</a></li>
41    <li class="nav__menu__list-item"><a class="nav__menu__list-item__link" href="">MAP</a></li>
42    <li class="nav__menu__list-item"><a class="nav__menu__list-item__link" href="">CONTACT</a></li>
43    <li class="nav__menu__list-item"><a class="nav__menu__list-item__link" href="">TOP</a></li>
44    <li class="nav__menu__list-item"><a class="nav__menu__list-item__link" href="">BLOG</a></li>
45  </ul>
46</nav>
47
48<div class="content">
49  <h1>コンテンツ</h1>
50  <p>コンテンツ</p>
51</div>
52</body>
53</html>

投稿2016/02/11 08:09

編集2016/02/12 08:02

flat

総合スコア617

退会済みユーザー

2016/02/11 10:09

ありがとうございます。とりあえずできました。

退会済みユーザー

2016/02/11 10:10

ありがとうございます。とりあえずできました。

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

html
1<meta charset="utf-8" />
2<script src="jquery.js"></script>
3<style>
4.header {
5    position: fixed;
6    width: 100%;
7    height: 4em;
8    border-radius: 4px;
9    border: solid 1px lightgrey;
10    background-color: #CCC;
11}
12.header-scroll {
13  width: 50%;
14  overflow: auto;
15  height: 3em;
16  margin-top: 0.2em;
17  border: solid 1px blue;
18
19}
20.outer {
21  width: 100%;
22  background-color: pink;
23}
24html, body {
25  width: 100%;
26  height: 100%;
27}
28</style>
29<nav>
30  <div class="outer">
31    <div class="header">
32      <div class="header-scroll">
33        <ul>
34          <li>aaa1</li>
35          <li>aaa2</li>
36          <li>aaa3</li>
37          <li>aaa4</li>
38        </ul>
39      </div>
40    </div>
41    <br /><br /><br /><br /><br /><br /><br /><br /><br />aaa1
42    <br /><br /><br /><br /><br /><br /><br /><br /><br />aaa2
43    <br /><br /><br /><br /><br /><br /><br /><br /><br />aaa3
44    <br /><br /><br /><br /><br /><br /><br /><br /><br />aaa4
45  </div>
46</nav>
47