[Resolved] Keep vertical scrollbar while disableing scroll & Activate/Disable sticky menu

[Steve]

Hello there Generate Press Team,

Prefix:
For an overlay i want to disable scroll of the body.
To not have the content jump around i want to keep the vertical scrollbar (which will always be used) which excludes the solution with “overflow: hidden”.

I already found a general solution (here is a link for everyone who is also interested in this: https://stackoverflow.com/questions/8701754/just-disable-scroll-not-hide-it/8701977)

I already updated this solution so that it works with wordpress/generatepress theme (fiddle link: https://jsfiddle.net/3vj070qm/2/)
And build a testpage for you guys. (url only for Admins visible sorry everyone else :P)

The Problem:
As you can see it works quite nice, but as soon as the body gets fixed the sticky menu disappears.
Question 1: how can i have the sticky menu stay while having the body be fixed?
I need the space above the static menu on page load, and sometimes i also need a combined header at top.
Question 2: is there a way for me to active/disable the sticky header on button click?

Its not an urgent problem so answer whenever you guys got the time.

ps: i love your theme and the new update and i recommend it as often as i can :D.

Thank you for your time and have a nice Day.

Best regards
Steve

[Tom]

Hmm weird one – hard problem to fix as well (disabling scroll while keeping the scrollbar).

Can you try commenting out the JS that adds the top value to the body element? I have a feeling that’s tricking the menu into thinking we’re at the top of the page.

[Steve]

If i comment that out you get to the top of the page where where i can see the static menus.

The top value is added to create the illusion of the page not scrolling (to keep the users vertical scroll and return to it as soon as the overlay is closing)

But now i understand why the sticky menu is gone -> since youre at the top of the page it thinks its not needed since the static menus is visible – or something like that.

I just had the idead to tackle the problem from another angle:
The problem with “overflow: hidden” is that the page jumps to the right since the scrollbar is gone;
Iam searching for a good solution to get the scrollbar width and add it to the right as the scrollbar disapperas – should stop the jumping and iam happy.

Ill comment here if i get a good solution.

Have a nice day & sorry for the wall of text 😀

[Tom]

That’s the method I’ve seen used quite a bit – it’s definitely possible 🙂

[Steve]

Update:

Even after searching and reading quite a bit, I was´nt able to find or create a zoom-proof js-script or detection. All options out there return a false result if the browser zoom is not at 100%.

My experiments with “window.devicePixelRatio” to detect zoom were not bad, but since iam not able to know if the user zoomed in 220% (returns 2.2) or if he uses a retina display and just zoomed 10% (also returns 2.2) I will not use it.

And who knows what bugs wait out there if you try to assume the window.devicePixelRatio.

Here is my code that ill be using for now:

//get vertical scrollbar width -> returns false result if browser has zoomed
var vsbwidth = (window.innerWidth-jQuery(window).width());

//reduce false return impact
if (vsbwidth > 19) { vsbwidth = 17;} else if (vsbwidth <= 0) {vsbwidth = 0}
console.log(vsbwidth);

The “vsbwidth” will be added to the right of the body if i remove the scrollbar so that the body dosnt jump around.

Thank you for your time and have a merry christmas.

ps.: Ill Mark this topic as resolved since it isnt really related to GP anymore^^ & i kinda found a solution

[Tom]

Glad you found a somewhat solution – it’s a tough issue to fix unfortunately.

Merry Christmas to you as well 🙂

[Author]

Posts