Sticky Scrolling effect affecting smooth scroll jump link position issue

[David Beckwith]

If a sticky scrolling effect is applied to an element, particularly header elements, then the smooth scroll jump link position is offset by the height of that element. Seems to be a common issue that most theme developers are applying a workaround to.
Would also be good to have a disable smooth scroll in Elementor as the scripts can clash with Theme scripts.

[Hutch]

+1 for this issue. Doesn't make sense to have a sticky option that doesn't take into account the offset for anchor tags to sections below. In my case I have made my custom header section (very cool feature by the way!) sticky as it contains my main nav menu. But it does not play nice with on page anchor tags to sections below it.

[dougm1966]

Definitely an issue. I'm surprised that this is actually a 'thing' to be honest. Everything is build around mobile these days and for this to not work on mobile correctly really puts a damper the 'one-page' website concept.

[black-eye]

+1

[pako69]

Hi
If it can helps > #4337

[pako69]

Hi
Sorry but you last update 2.0.10 (Fix: Added offset for anchor scroll section is sticky ) did not resolve the issue it elementor is used with GeneratePress Nav

[Hutch]

Still not working. I have a header block set scroll to sticky. The section below contains your slider widget. The Button link in that slider widget links to an anchor tag in the section below. However, When button is clicked, the screen slides past the top of the section it is linked to. I am using Astra theme with all of its options turned off. NOTE: If I take the sticky setting off the header section, scrolling to tag works perfectly.

[Tanner Chung]

Just wondering if there was a fix for this. I put in my own CSS fix for a sticky header for pages based on my sticky header:

:target:before {
    content: "";
    display: block;
    height: 105px; 
    margin: -105px 0 0; 
}


@media only screen and (min-width: 767px) {
    :target:before {
        content: "";
        display: block;
        height: 76px; 
        margin: -76px 0 0; 
    }
}

@media only screen and (min-width: 767px) {
    :target:before {
        content: "";
        display: block;
        height: 76px; 
        margin: -76px 0 0; 
    }
}

@media only screen and (min-width: 960px) {
    :target:before {
        content: "";
        display: block;
        height: 100px; 
        margin: -100px 0 0; 
    }
}

@media only screen and (min-width: 1440px) {
    :target:before {
        content: "";
        display: block;
        height: 115px; 
        margin: -115px 0 0; 
}

But this doesn't work when the page is using Elementor

[David Beckwith]

Any update on a Disable Option? Really quite painful dealing with script conflicts.

[Riccardo Marcangelo]

This issue with the anchor scroll position being inaccurate when a Sticky element is added is still there. It appears to work fine if Sticky Top is selected but is bugged when Sticky Bottom is selected.

[IlPizza79]

Still an issue in 2021 :-(

[OffAlex007]

Set scroll distance to -1 manually, that may look a little bit better, but still a problem.
Hope it works!