Sticky Header JS on Scroll

kars

Hello,

We are using sticky header and have also activated it via CSS on mobile. The issue is all on-page anchor links scroll underneath the header.

Some templates (non JA) have a height input field in admin which generates a scroll value for on page links.

That said, could you provide a JQuery or vanilla JS snippet that we could place in the template's custom code section that would add 70px top margin page scroll when there is # present in link?

I've noticed there is some newer CSS for page scroll margin but it doesn't work at all in iOS.

Thanks!

saguaros

Hi kars

Could you share the URL and login info of your site + URL of that page where I can see the issue? I will check for you.

kars

Hi Saguaros!

Thanks for the quick note back. I've updated the fields with login credentials.

As a note, its setup as a (1) page site. So the sticky menu items and also the mobile (off-canvas) items all link to page anchors. It's not super bad on desktop, but on mobile the headings in some places are cut off.

saguaros

Hi kars

The site URL seems not to be correct, could you check again?

kars

saguaros

Hi Saguaros,

Looks like RS Firewall struck again. The URL provided is correct. The admin credentials were being blocked but are now good to go.

Thanks again!

saguaros

kars I can view your site now, let me check and will get back to you.

saguaros

Update:

Our developer just updated this JS file in T4 framework: plugins/system/t4/themes/base/js/base.js

//check sticky offset
var sticky_offset = 0;
if($('.t4-header').length){
    $('.t4-header').each(function(el){
        sticky_offset += $(this).outerHeight();
    });
}

basejs.zip

2kB

Try to clear your browser cache and check again.