Как избежать scroll to top, после добавления/удаления position fixed к body?

Question

[wiyod]

Не могу отделаться от навязчивой идеи сделать нормальный оверлей без удаления скроллбара. Нашел вариант добавления position: fixed для боди. Но вылезла проблема - после удаления класса страница скроллится на топ. Как избавится? Вроде как это связано с добавлением дополнительно значения top, но что-то у меня не работает.

Вот мой код - https://codepen.io/kodej/pen/vWOvLz
А вот как хочется сделать - https://useassembly.com (уменьши экран до появления гамбургера)

Answer 1

[ⓒⓢⓢ]

по твоему примеру, как то так:
после 14 строки, добавь строку

window.scrollTo(0,parseInt(document.body.style.top));

spoiler

if (!this.isActive) {
        document.body.style.removeProperty('position')
        window.scrollTo(0,parseInt(document.body.style.top));
      } else {

UPD.
Но в текущем варианте я бы не стал top стиль задавать. Лучше уж вынести в свойства элемента

Comments

[wiyod]

Работаето, спасибо. А что имеете ввиду под свойствами элемента? Как правильней сделать?

[ⓒⓢⓢ]

А что имеете ввиду под свойствами элемента?

wiyod, значение высоты вынести в атрибут и не добавлять без необходимости стиль top для документа. Иначе можно случайно добавить стиль позиции (relative\absolute\fixed) и будет неожиданный эффект, как тот же top: XXpx работает и с relative без видимых отступов в инспекторе, далее можно долго гадать откуда взялся отступ.
Выносишь в атрибут значение, = на сколько надо проскроллить документ

upd
Да и на кроссбраузерность проверь в мобилках. У документа несколько методов есть с помощью которых можно скролить его

[wiyod]

JRK_DV, заметил пренеприятнейший косяк - после добавления top весь контент сдвигается же. На это сайте в примере этот косяк замаскирован модалкой, но даже так я заметил. ЧТо ж делать тогда? Выходит это не рабочий вариант, добавлять фиксд к боди... Придется по старинке убирать скролл и потом бегать по всему сайту добавлять марджины.

[ⓒⓢⓢ]

после добавления top весь контент сдвигается же

значение высоты вынести в атрибут и не добавлять без необходимости стиль top

wiyod, не совсем тебя понял, если величину скролла вынести в атрибут, то откуда там стиль top появляется?

[wiyod]

JRK_DV, это вариант выноса в атрибут я не пробовал еще я все о первом варианте. Правда я вчера пробовал сохранять это значение просто в JS переменную, и скролла на прежнее место не происходило.

[ⓒⓢⓢ]

значение просто в JS переменную, и скролла на прежнее место не происходило.

В этой новой реализации, учёл ведь что:

window.scrollTo(0,parseInt(document.body.style.top));

Этой строкой мы берём значение стиля top из body?
И если в аттрибут вынести, будет точно так же.
Стиль top в элементе body = 0 (если не определён)
wiyod, а так больше я нечем помочь не могу

[wiyod]

JRK_DV, учел, было

window.scrollTo(0,parseInt(savedValue))

И это не работало.

[wiyod]

JRK_DV, вот смотрите, так же? https://codepen.io/anon/pen/NwGRMq

[wiyod]

Упс, кажется это значение обнуляется как раз в нужный момент, поэтому не работает.

[wiyod]

РАБОТАЕТ!!! ДА ЕСТЬ ЖЕ - https://codepen.io/kodej/pen/vWOvLz