Как сделать такой меню учитывая следующих условий?

Question

[Alex ALex]

<ul class="menu clearfix">
<li><a href="#">Главная</a></li>
<li><a href="#">Work Work</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Blog Work</a></li>
<li><a href="#">Contact</a></li>
</ul>

Вот то что я смог... https://codepen.io/P-RO-ME-TEY/pen/Kboorj

Условие:
1) фиксировано сверху (при скроле она стояла сверху).
2)адаптивной,
3) активность (при выборе конкретного раздела меню она была активной что бы посетитель мог с легкостью догадаться в какой разделе он сейчас находится..),
Пожалуйста хотябы 1 из этих условий покажите как сделать в примере тут codepen.io.

ЗАРАНЕЕ СПАСИБО!!

Answer 1

[Евгений]

Выложите свой код, как вы попытались это сделать, иначе похоже на задание

Comments

[Alex ALex]

Вот выложил то что смог сделать. наверху посмотрите есть ссылка для codepen.io

Answer 2

[midnight_yola]

1) фиксировано сверху (при скроле она стояла сверху).
---можешь использовать position:fixed; top:0(или значение высоты менюшки...не помню точно)
2)адаптивной
---тупо переопределяешь классы
3) активность
---тут только на JS(JQ). получаешь координаты блоков и уже проверяешь находится ли тот блок на экране(виден ли он пользователю)

Comments

[Alex ALex]

Спасибо а вы можете хоть какой то из выше указанных разделов показать на моем примере ссылка https://codepen.io/P-RO-ME-TEY/pen/Kboorj

[MaksPaverov]

Alex ALex, 1) https://codepen.io/anon/pen/REBdrb

[Alex ALex]

MaksPaverov, Спасибо) я теперь попробую сделать активность меню может посоветуешь где можно прочитать или посмотреть примеры?