@violin0878

Как сделать якорь с плавающим отступом сверху?

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

Как сделать, чтобы при прокрутке вниз отступ был в 200px, вверх - в 100 px от якоря?

Для прокрутки использую такой код
$(document).ready(function(){
  $("#menu").on("click","a", function (event) {
  event.preventDefault();
  var div = $(this).attr('href'),
  top = $(div).offset().top - 100;
	  
  $('body,html').animate({scrollTop: top}, 1000);
  });
  
});
  • Вопрос задан
  • 52 просмотра
Решения вопроса 1
dyuriev
@dyuriev
A posteriori
top = $(div).offset().top - 100;

у вас до данной позиции (значение top) скролл идет, экспериментируйте

upd: прочитал невнимательно, сравнивайте текущее положение и если $(div).offset().top меньше текущего, то есть скролл вверх, то -100, если больше, то есть скролл вниз, то -200

upd2: js не практикую, но должно быть что-то вроде этого:
$(document).ready(function(){
  $("#menu").on("click","a", function (event) {
    event.preventDefault();
    var div = $(this).attr('href');
    var top = $(div).offset().top;
    var pos = (window.pageYOffset !== undefined) ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop;

    var delta = (top > pos) ? 200 : 100;
  
    top = top-delta;
    $('body,html').animate({scrollTop: top}, 1000);
  });
  
});
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Artezio Нижний Новгород
от 130 000 до 180 000 ₽
Artezio Москва
от 160 000 до 220 000 ₽
Sportrecs Москва
от 150 000 до 200 000 ₽
03 дек. 2020, в 22:34
500 руб./за проект
03 дек. 2020, в 22:19
150000 руб./за проект
03 дек. 2020, в 21:54
300 руб./за проект