Little jumps after scrolling

Hello,

It seems that there’s another script that does that little jump-adjustment. The script is this one:

...themes/kalium/assets/js/main.min.js

Try this:

Go to “Page scroll to id” settings and enable “Prevent other scripts from handling plugin’s links” option. Also, add the following to “Prevent other scripts from handling plugin’s links selector(s)” field:

a[href*='#']:not([href='#'])

For the offset, instead of a fixed pixel value, try adding your sticky header’s css selector in the “Selector(s)” option field:

header.site-header--sticky-initialized

Save changes, test and let me know ??

@malihu, thanks for your help, it is very much appreciated!

So enabling the two “Prevent …” options did not help, there is still these little jumps.

The offset I set before was not really correct, I put in a correct, fixed number, and that kind of reduced the “size” of the jumps, but they are still there.

Adding the CSS selector to the offset field did not work that well, because the header reduces its height when scrolling down. So when the page is opened and a link in the menu is clicked, the plugin jumps to the position where the target would have been if the header would have retained its size. The “Verify target position …” would solve that, but the scrolling adjustment it makes also does not look that smooth.

No problem ??

For the offset, you could add the inner child element of the header that’s 64px high:

header.site-header--sticky-initialized .header-block__row-container

Another way would be to use plugin’s “Auto-generate #ps2id-dummy-offset element” option which enables setting more advanced offsets, independent of the page’s layout. For example, you can enable this option and use #ps2id-dummy-offset as the “Offset” option value. Then, you can set its CSS like this:

#ps2id-dummy-offset{
    height: 84px;
}

For the js (scrolling “jump”), I don’t know if you can edit your theme’s main.min.js but if you can, try to edit the file like below and see if it fixes the issue:

Edit your theme’s ...kalium/assets/js/main.min.js and change the text:

f.find("> a").on("click",

to:

f.find("> a:not([data-ps2id-api])").on("click",

Replace the exact text. Save the file (clear cache if needed) and test.

Thanks again, modifying the main.min.js seems to have done the job! Though probably this patch will not survive a theme update and I may have to redo it.

Regarding the offset, hard-coding the 84px seems to be the best way. Like you said, the element you referenced has 64px height. However, there is still padding, and that padding is what is changed when scrolling down. When opening the site it is 50px on both sides, when scrolling down it becomes 10px on both sides, hence the 84 px.

• This reply was modified 1 month ago by theninth7.

Indeed, if you update the theme you’ll need to redo this.

If the 84px offset seems to work great ??

Marking this as resolved but let me know if you need more help.