Якорная ссылка с двумя фиксированными навигациями — сложная

По сути, у меня есть фиксированный заголовок с навигацией, которая всегда прикреплена к верхней части окна. Затем у меня есть еще один фиксированный элемент, который является разбиением на страницы, но он прикрепляется к верхней части окна только при его прокрутке!

Эта разбивка на страницы имеет якорные ссылки, которые ссылаются на разные разделы на странице! Однако, когда вы нажимаете на ссылку, она перекрывает содержимое, которое фиксируется обоими плавающими элементами.

Вот пример: http://www.chudz.co.uk/test/

Если вы прокрутите вниз, вы увидите, что нумерация страниц прикрепляется к навигации заголовка! Затем, если вы нажмете на «А» в нумерации страниц, вы увидите, что произойдет! Контент раскрывается! (Единственная ссылка, которая работает, извините).

Кто-нибудь знает решение, которое я мог бы использовать?

Спасибо


javascript jquery css position anchor
person Chudz    schedule 25.02.2013    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Вот обходной путь JavaScript для этой проблемы. Во-первых, измените атрибут имени на атрибут id в заголовках ссылок, как здесь.

<h2><a id="a">Authors - A</a></h2>

Затем добавьте этот скрипт в свой нижний скрипт.

$(document).ready(function(){
    $("#pagination a").click(function(event){ 
        event.preventDefault();
        var o =  $( $(this).attr("href") ).offset();   
        var sT = o.top - 151; // 151 is the header height + navigation height 
        window.scrollTo(0,sT);
    });
});
person Derek    schedule 25.02.2013
comment
Это сработало! Единственная проблема заключается в том, что разбивка на страницы не фиксируется до ее прокрутки, если кто-то нажимает B, содержимое все еще скрыто. Есть идеи, как это исправить? - person Chudz; 25.02.2013
comment
Не могли бы вы уточнить и обновить свою тестовую страницу? Чтоб я попробовал. - person Derek; 25.02.2013
comment
Извините, Дерек, просто иногда я делал это с CSS, который ломал его, я исправил его, теперь он работает, спасибо! - person Chudz; 26.02.2013

arrow_upward
1
arrow_downward

Ваша фиксированная нумерация страниц не занимает места в доме.

Вы должны использовать «id» вместо «name», затем добавить класс к якорю, расположить его абсолютно и переместить вверх с отрицательным полем (таким же, как высота нумерации страниц). Это гарантирует, что якорь начинается ниже нумерации страниц.

person Alex    schedule 25.02.2013
comment
Зачем использовать скрипт, чтобы исправить это, когда есть решение CSS? Просто добавьте класс к своим якорям со стилем: margin: -151px. - person Alex; 25.02.2013