Не могу это пофиксить в шапке при скроле?

Question

[Toy Boy]

/* Smooth scroll */
    $("[data-scroll]").on("click", function(event) {
        event.preventDefault();

        var $this = $(this),
            blockId = $this.data('scroll'),
            blockOffset = $(blockId).offset().top;

        $("html, body").animate({
            scrollTop:  blockOffset
        }, 500);
    });

выходит так.
а нужно так.

Answer 1

[Вадим]

$("html, body").animate({
  scrollTop:  blockOffset - 150 // или высота шапки
}, 500);

Comments

[Toy Boy]

спасибо, помог!

[Toy Boy]

но вышла другая проблема...
https://drive.google.com/file/d/1U8n-AqSVZyKUSF3oG...

[Вадим]

sdydno, типа при клике из начального состояния не верно прокручивает, а при клике из какого-то положения - верно?

[Toy Boy]

да, все верно

[Вадим]

sdydno, Ну тут уже без дебага не обойдётся.
поставьте debugger и шаг за шагом проведите отладку почему у Вас так получается.

$("[data-scroll]").on("click", function(event) {
        event.preventDefault();
        debugger
        var $this = $(this),
            blockId = $this.data('scroll'),
            blockOffset = $(blockId).offset().top;

        $("html, body").animate({
            scrollTop:  blockOffset
        }, 500);
    });

Отладка в chrome

[Toy Boy]

Вадим, может я вам свой код отправлю?

[Вадим]

sdydno, Архивом? Не надо.
У Вас статика только?

[Toy Boy]

да. может я код неправильно написал...

[Вадим]

sdydno, Лучше тогда на github pages залейте.

[Toy Boy]

https://github.com/sdydno/sdydno

[Toy Boy]

или сайт сделать?

[Вадим]

sdydno, ну в соответствии с инструкцией

[Toy Boy]

Вадим, https://sdydno.github.io/sdydno/

[Вадим]

sdydno, Потому что когда шапка становится фиксированной - она изымается из потока, соответственно, offset top у целевога блока уменьшается на высоту шапки и происходит это в момент прокрутки до него.
Таким образом, нужно либо по современному фиксировать шапку:

.header.fixed{
    box-shadow: 0 3px 10px rgb(0 0 0 / 20%);
    position: sticky;
    top: 0;
    /* left: 0; */
    /* right: 0; */
    /* -webkit-transform: translate3d(0, 0, 0); */
    /* transform: translate3d(0, 0, 0);
}

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

[Toy Boy]

Вадим, Спасибо большое за уделенное время!!! Очень помог друг!