| |
|
|
| | Салют.
Столкнулся с одной проблемой: на сайте фиксированная шапка, то есть, div с position:fixed. Понаделали длинных страниц, понавтыкали якорей, и получается, что шапка перекрывает начало подъякорного текста. Пробую для якорей указать относительную позицию, но они спихивают контент вниз. Пробовал делать их блочными, все равно некрасиво.
Может, можно как-то скриптом перехватить переход по ссылке, содержащей "#", и уже здесь домотать недостающие пиксели? Или есть более простой метод? | |
| |
|
|
| |
|
|
| |
для: DJ Paltus
(06.12.2012 в 12:27)
| | | У слоя с контентом должен быть внешний отступ равный высоте шапки, а это значит что все элементы этого слоя будут как минимум по границе шапки (не считая прокрутку). И каким образом переход по якорю при этом может попадать под шапку? | |
| |
|
|
| |
|
|
| |
для: confirm
(06.12.2012 в 12:59)
| | | Эм.
У слоя с контентом задан верхний margin, в который попадает шапка при верхнем положении страницы. | |
| |
|
|
| |
|
|
| |
для: DJ Paltus
(06.12.2012 в 13:50)
| | | Написал, понял теперь что за проблема. | |
| |
|
|
| |
|
|
| |
для: confirm
(06.12.2012 в 15:03)
| | | Тем временем попробовал у всего основного контента сделать относительную позицию ниже на высоту шапки - вместо верхнего margin. Эффект сохранился. | |
| |
|
|
| |
|
|
| |
для: DJ Paltus
(06.12.2012 в 15:08)
| | | Да не помогает это, браузер же прокрутит документ до границы якоря, и все отступы не учитываются. Скриптом надо решать, например, на jquery что-то типа такого:
$('a').on('click', function(){
if(this.hash) $(document).data('h',1);
});
$(document).scroll(function(){
if($(this).data('h')) $(this).data('h',0).scrollTop($(this).scrollTop()-head);
});
|
где head, это высота шапки. | |
| |
|
|
| |
|
|
| |
для: confirm
(06.12.2012 в 15:33)
| | | Спасибо за решение!
Я придумал вариант чуть элегантнее. На мысль навел метод "свешивания" знаков препинания в некоторых типографах.
<a name=herere style="display:block;margin-bottom:70px; margin-top:-50px"></a>
|
Соответственно, 70 - это высота шапки, а 50 - это высота шапки за минусом высоты строки окружающего якорь текста.
Вот только не получается прибить css-свойство: селектор не могу придумать, чтобы отбирал a с name и без href. | |
| |
|
|
| |
автор: flake111 (07.08.2013 в 16:44) |
|
| |
для: DJ Paltus
(07.12.2012 в 11:58)
| | | Спасибо за простое и хорошее решение! | |
| |
|
|
| |
автор: Glacier (13.02.2014 в 15:27) |
|
| |
для: DJ Paltus
(07.12.2012 в 11:58)
| | | Есть еще более удобный способ:rnrn$('a[name]').css({'position':'absolute','margin-top':'-173px'});rnrn173px - высота шапки | |
| |
|
|
| |
|
|
| |
для: DJ Paltus
(07.12.2012 в 11:58)
| | | Видел много различных вариантов на CSS в этой статье http://truemisha.ru/blog/css/ssyilki-yakori.html | |
| |
|
|
| |
|
|
| |
для: confirm
(06.12.2012 в 15:33)
| | | Тут был глупый вопрос.
Удалите его, пожалуйста. | |
| |
|
|
| |
|
|
| |
для: DJ Paltus
(06.12.2012 в 12:27)
| | | в верстке расположите div с фиксированным меню перед закрывающим тегом /body | |
| |
|
|
| |
|
|
| |
для: iambad
(22.09.2015 в 10:54)
| | | У меня заработало так: <a name="name" style="display:block;margin-top:-80px;padding-top:80px"> | |
| |
|
|
