Плавная прокрутка с залипающим меню

теперь это моя проблема, это одностраничный сайт с липким меню (#main-menu). #main-menu фиксируется в этом положении. На первом изображении показано, как должна выглядеть страница, когда я нажимаю ссылку «О программе» в меню, страница будет плавно прокручиваться на #about.

Первое изображение

Но здесь, на втором изображении, что делает мой сайт, когда я нажимаю ссылку «О нас», заголовок «О нас» прокручивается вверх и скрывается в главном меню.

Изображение второе

Вот мой JS-код:

$('a').click(function(e) {
        var target = $(this).attr('href');
        e.preventDefault();

        $('html,body').animate({
            scrollTop: $(target).offset().top
        }, 800, 'easeInOutCirc');
    });

Как мне сделать так, чтобы он останавливался только до дна #main-menu? Заранее спасибо миллион!


jquery smooth-scrolling
person jmc    schedule 08.10.2011    source источник

Ответы (1)


arrow_upward
3
arrow_downward

вы хотите вычесть высоту заголовка из offsetTop.

$('html').animate({ // $(document.documentElement) works too
  scrollTop: Math.max($(target).offset().top - $('#your-header').outerHeight(), 0)
}, 800, 'easeInOutCirc');

добавьте Math.max(..., 0), чтобы избежать прокрутки до отрицательного смещения, когда место назначения ссылки находится в самом верху.

person rodneyrehm    schedule 08.10.2011
comment
Действительно ли возможно прокрутить до отрицательной позиции? - person Wesley Murch; 08.10.2011
comment
попытка прокрутки в firefox до 0. Но вы никогда не знаете, что браузер x делает в обстоятельствах y. - person rodneyrehm; 08.10.2011
comment
Это работает отлично! Но могу ли я добавить отступ +10px после externalHeight #main-menu в этом коде? Таким образом, заголовок не будет сильно прилипать к нижнему краю. Еще раз большое спасибо! - person jmc; 08.10.2011
comment
конечно, scrollTop: Math.max($(target).offset().top - $('#your-header').outerHeight() + 20, 0) делает свое дело ;) - person rodneyrehm; 08.10.2011