Блог

Главная - Вопросы по программированию - Плавная прокрутка с помощью липкого меню

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

#jquery #smooth-scrolling

#jquery #плавная прокрутка

Вопрос:

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

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

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

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

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

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

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

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

Ответ №1:

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

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

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

Комментарии:

1. Действительно ли возможно прокрутить до отрицательной позиции?

2. попытка в Firefox прокручивается до 0. Но вы никогда не знаете, что браузер x делает при обстоятельствах y.

3. Это работает отлично! Но могу ли я, например, добавить поле 10 пикселей после внешней высоты #main-menu в этом коде? Таким образом, заголовок не будет сильно прилипать к нижнему краю. Еще раз большое спасибо!

4. конечно, scrollTop: Math.max($(target).offset().top - $('#your-header').outerHeight() 20, 0) делает свое дело 😉