прокрутите до привязки + отрегулируйте для фиксированного меню вверху

Я видел несколько вопросов и ответов по этому поводу, но я не могу заставить их работать в моей ситуации, например: JQuery Smooth Page Anchor Transitions with position:fixed menu
:(

Пример страницы: http://fpco-site.squarespace.com/familylife

Когда вы прокручиваете страницу вниз, главное меню закрепляется/закрепляется наверху. также есть раскрывающийся список, связанный с фиксированным меню. внутри меню (и, возможно, в других местах на странице) у меня есть обычные ссылки, а также якорные ссылки. в настоящее время, когда нажимаются ссылки привязки, меню и раскрывающийся список закрывают содержимое, когда оно находится в фиксированном положении.

Мне нужно получить переход к якорям, чтобы приспособиться к меню, а также к раскрывающемуся списку при открытии. Было бы идеально, если бы контент анимировался вверх и вниз по мере его прокрутки к якорю и вверх и вниз по мере открытия и закрытия раскрывающегося списка.

Если это имеет значение, мои привязки по всей странице добавляются через jquery.

Я пробовал следующее, но в коде что-то не так, что ломает мое выпадающее меню:

    /* scrollTo */
    function scrollTo(id){
        $('html,body').animate({scrollTop: $(id).offset().top},'slow');
    };
    $('a[href^="#"]').click(function(){
        scrollTo($(this).attr('href'));
        return false;
    });

Я подумал, что если бы я мог заставить это работать, тогда я мог бы добавить дополнительный оффест для учета меню, а затем попытаться компенсировать, когда раскрывающееся меню открывается/закрывается. но я не мог заставить эту первую идею работать ....


scroll jquery offset anchor jquery-animate
person VUELA    schedule 25.04.2013    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Я смог исправить это в своей ситуации, используя CSS для изменения положения моих якорей. в моем случае якоря не применяются к какому-либо визуальному элементу, поэтому я могу перемещать их, ничего не повреждая. я использовал:

.anchor {
position: relative;
top: -160px;
height: 1px;
display: block;

}

Я также сказал, чтобы раскрывающийся список закрывался при нажатии на якорную ссылку в раскрывающемся списке. таким образом, мне не нужно было беспокоиться о том, открыто или закрыто раскрывающееся меню.

и теперь, когда я нажимаю, чтобы перейти к одному из якорей, он выстраивается прямо под моим фиксированным меню вверху :) возможно, есть лучший способ, но это работает для меня! ~

Далее, чтобы увидеть, могу ли я заставить его анимировать прокрутку до якоря вместо того, чтобы прыгать прямо к нему. это было бы чудесно :)

person VUELA    schedule 25.04.2013