Фиксированное меню и якорь?

Question

[smoklew]

Ребят имеется фиксированное меню и якорь к слову "Новости" ,когда на него нажимаешь это слово закрывается менюшкой, к остальным словам всё нормально, хочу скинуть исходники , можете пожалуйста посмотреть и пощелкать на пункты меню"Новости" , "Стрим" сказать что не так и исправить?
скайп для удобства:autor4n

Comments

[Алим Алибаев]

Ну это уже 2ой твой вопрос, типо "Держите исходники и сделайте", нужно учить самому, или заплатить!

Answer 1

[Александр Цымбал]

1. якорь сделай не на <p>, а создай прямо перед ним <a name="news" class="anchor"></a> - это будет якорем. важно, ничего не размещать внутри этой ссылки.
2. для ссылок .anchor создаем стили:

.anchor {
margin-top: -100px;
display: inline-block;
position: relative;
height: 1px;
width: 1px;
}

где 100px нужно заменить на высоту вашей фиксированной шапки. таким образом якорь будет физически находиться на 100px (или сколько там у вас) выше, чем он должен быть.

Comments

[smoklew]

если есть возможность , добавьтесь в скайп пожалуйста!
autor4n

[Теодор Выменев]

Не заработал этот способ

[Юлия Волобой]

Работает с position: absolute;
- выносить отдельно не нужно
Для мобильных margin-top: 0;
- начиная с разрешения, когда появляется мобильное меню

Answer 2

[smoklew]

https://yadi.sk/d/_W2iiErieyFwC - исходники

Answer 3

[Теодор Выменев]

Вот так заработало у меня:
<a id="anchor" class="anchor100"></a>

.anchor100 {
padding-top: 100px;
margin-top: -100px;
-webkit-background-clip: content-box;
background-clip: content-box;
}

Метод описан Мишей Рудастых