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

Question

[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);
  });
  
});

Comments

[Kostya10295]

Получить текущую позицию экрананапример document.body.scrollTop затем сравнить с координатами якоря и в зависимости от результата выполнять нужное действие

Answer 1

[Денис Юрьев]

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);
  });
  
});

Comments

[violin0878]

Спасибо.
Если бы знать, как их еще и сравнить... Я в этом деле новичок.)))

[Денис Юрьев]

var htmlpos = (window.pageYOffset !== undefined) ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop;

текущую "скролл"-позицию страницы можете узнать так, а if-then-else - посильно будет изучить самому)

[Денис Юрьев]

violin0878, обновил ответ, но не проверял (на js с 2018 ни строчки не написал)

[violin0878]

Спасибо БОЛЬШОЕ!
Все получилось идеально!

[Денис Юрьев]

violin0878, если честно, сам не ожидал) пора в резюме добавить базовые навыки js xD