Как сделать блочный скроллинг с фиксированной шапкой?

Question

[Олег]

Ребята, буду очень благодарен, если подскажете решение.

Нужно реализовать страницу со следующим функционалом:

1. Шапке задан position: fixed и фиксированная высота (например, 85px);
   
2. Высота каждого блока равна высоте вьюпорта (экрана) минус высота шапки;
   
3. Поблочный скроллинг (например, как здесь).
   

При этом всё должно работать корректно. Шапка не должна скрывать контент. Между блоками не должно быть пустого пространства. Если блок переполнен контентом, то он должен вытягиваться. При этом внутри блока прокрутка должна работать как обычно. Например, такое предусматривает этот плагин.

Ребят, кто с таким сталкивался? Выручайте. Уже 3 раза голову сломал.

Answer 1

[Антон Сашнин]

Попробуйте fullpage.js -- https://github.com/alvarotrigo/fullPage.js/

В опциях можно задать верхний отступ для каждого экрана (ставите равной высоте меню).
Например,

$('#fullpage').fullpage({
        paddingTop: '85px',
        verticalCentered: false,
        scrollOverflow: true,
});

Comments

[Олег]

Это не подойдёт. Да, контент отодвинется вниз, но фон секции всё равно будет залезать под шапку. А если фон убрать или задать background-clip, то между секциями всё равно будет пустое пространство.

[Антон Сашнин]

r45her: > Да, контент отодвинется вниз, но фон секции всё равно будет залезать под шапку
Фон под шапку залезать не будет, у меня была аналогичная задача. Попробуйте.

[Олег]

Антон Сашнин: вот - https://jsfiddle.net/R45H/32hd05j6/
Тут всё работает, но фоновый цвет всё равно остаётся под шапкой.
Конечно, в реальном проекте шапка не будет полупрозрачной. Но если вместо цвета будет картинка, либо на каких-то разрешениях скролл отключится, будет не очень красиво.

[Антон Сашнин]

r45her: в section можно поместить div с height = 100%, фонового цвета/картинки под шапкой не будет.

[Олег]

Антон Сашнин: да, но останется пустое пространство.
https://jsfiddle.net/R45H/32hd05j6/6/

Answer 2

[Александр Лелека]

Возможно этот пример подойдёт, если я правильно понял задачу.
https://youtu.be/RX5kFtUI7q0

Answer 3

[Dimasc]

Может вы искали что-то подобное

document.querySelectorAll('a[href^="#"').forEach(link => {

link.addEventListener('click', function(e) {
e.preventDefault();

let href = this.getAttribute('href').substring(1);

const scrollTarget = document.getElementById(href);

const topOffset = document.querySelector('.header').offsetHeight;
// const topOffset = 0; // если не нужен отступ сверху
const elementPosition = scrollTarget.getBoundingClientRect().top;
const offsetPosition = elementPosition - topOffset;

window.scrollBy({
top: offsetPosition,
behavior: 'smooth'
});
});
});