Scroll-padding not working

[mcostales84]

Hi there, I have a site with a sticky header and some anchor links to sections. The problem is that the sections are being cut-off by the header. I’m trying to add a scroll-padding-top but can’t make it work.
Can you help?

This is the URL https://jorges99.sg-host.com/ (click on the Learn More inside the hero section)

[charlie]

Can you grant us access to this site in a secure note? This has come up before, but I’ve never been able to recreate. Being able to see it happen locally we can get to the bottom of this. I would guess it’s the fact the first bar is height of 8px is messing with the scrolling logic, however that never affected my scrolling when doing a similar setup.

[mcostales84]

Here you have

[tristup]

Hi @mcostales84,

It might be related to an ongoing problem with the Sticky Bar and the offset calculation. I would suggest you go through the following thread which might help you.

Pro sticky menu jumps not exactly to section

Hi @salilou, Thanks for reaching out. It might be related to an ongoing problem with the Sticky Bar and the offset calculation while the position is set to Relative. You can either set it to the Absolute and check or you can add the following code into the Theme Options > JS to manually set the offset value. window.csGlobal.csHooks.filter('hash_scrolling_offset', (offset) => { return offset - 120; } ); Hope it helps. Thanks

Anchor links scrolls too far and can't find the right solution

Hi. I need help with my page https://www.aksima.no I have some ID of sections set but the scrolling goes to far so it hides the heading. I have searched and tried various JS codes from the forum but none of them helps. Like this link: https://www.aksima.no/tjenester/#individuell-terapi It hides the title. I guess it has to do with the header or something. Can someone help with the right code and suggestions. I am no coder

Thanks

[mcostales84]

I have tried all of those solutions and didn’t work at all.
Also, the code you’re sharing is a patch, from years ago, that problem should have been fixed already.

[tristup]

Hi @mcostales84,

It has been already fixed, but somehow it reverted. I have already informed our developers about this and they are looking into it.

Thanks

[charlie]

Something that changed early on is this line in the change log for V6.0.0. In short those filters are now all fixed_top_offset. On our end I’m going to add the other filters to filter this new one for support for pre pro 6 sites. I do think we really need to fix the scroll height issue, however I was not able to grab a copy of your site post issue fix. Do you by chance have a copy of the site pre fix? It’s unfortunate I can’t recreate even with copying your basic structure. I’m guessing something else on the page triggers this issue. Thanks glad it’s working better on your end now and we’ll definitely be tightening down the frontend libraries for Pro 6.

• Updated: Remove hash_scrolling_offset and scrollspy_offset JS hooks and implement single fixed_top_offset hook

[mcostales84]

@charlie you still have access to my site, the solution I found on Facebook, pointed by Josh Donnely, was this code added to the JS on the homepage (where I have that problem)

jQuery(document).ready(function ($){
$('a[href*="#"]').off( "click touchstart");
$('a[href*="#"]').on('touchend click', function(e) {
href = $(this).attr('href');
notComments = href.indexOf('#comments') === -1;
if ( href !== '#' && notComments ) {
var theId = href.split('#').pop();
var $el = $('#' + theId);
if ( $el.length > 0 ) {
e.preventDefault();
$('html, body').animate({
scrollTop: $($el).offset().top -120
}, 450);
return false;
}
}
});
});

[mcostales84]

if you remove that, the problem comes back

[charlie]

Thanks a bunch for the notes. I’ll keep you posted on the fix.