Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
  • #1424612

    I have a sticky header and anchor links on a one page site to scroll to sections. The header is transparent background and i want the scrolling to go all the way to start of section on anchor link click. It leaves 56px at the top. How can i adjust?

    i have checked out this link but doesn’t work for me


    Hey stephenoconnor,
    Please link to your page so we can examine.

    Best regards,


    If I understand you correctly, then you have, for example, a page that is 1000px high – and you want to shrink the header over this entire scroll distance, e.g. from 100px to your 54px.
    But that would mean that the header should only shrink by fractions of a pixel per pixel of scroll distance? I don’t think this is possible.
    However, if you only want to have a delayed shrinkage, i.e. I first scroll 100px without anything happening to the header, and only then should the shrinkage start, that could be possible.


    Look at this link here: and then here: – see how i want it to have no green at the top – i want it to go to the start of the blue section instead


    hm …


    Thanks for the link to your page, your page is not long enough for the blue section to reach the top of the page.
    Try adding more content at the bottom so when you scroll the blue section can reach the top of the page.

    Best regards,


    Ah Mike that’s not it bro – i can do that, but it’s just a mockup of a longer page where it doesn’t work – i am talking about where the scroll goes to. I have added more anyway as per your request. Maybe you misunderstand my question?


    yes thats it – ( and btw. the way you described that “problem” was a bit misleading.


    thanks for input Guenni007 – hoping to get to the bottom of this – i think as per this post ( it has control inside avia.js somewhere around this part: the function ( ” $.fn.avia_smoothscroll = function(apply_to_container) ” )


    1. if enfold has shrinking header, let’s say height: 45px
    2. then anchor link scrolls to anchor location – 45px (minus 45px)
    3. if enfold has no shrinking header, let’s say height 90px
    4. then anchor link scrolls to anchor location -90px (minus 90px)
    5. i want to adjust to adjust the “scroll-to” position so that it scrolls all the way to anchor position (not anchor position minus header height)


    OK thanks to great plugin makers I found the solution: see here – just set the scroll offset value to 0 it works – thanks for all your inputs!


    btw – you can insert to page-scroll-to-id to offset a selector f.e. #header – so this will react on the current header height.

    Next: on the input field for excluded selectors – add behind the given selectors :
    ( ps avoid a comma behind the last excluded selector ! )

    the no-scroll class is used on enfold for click events that do not need a scroll to ID. F.e. an inline popup. A link to a hidden container should only open in lightbox and not open the lightbox and scroll to that hidden container.


    Glad to hear that you have this sorted out, and thank you to Guenni007 for the tips, unless there is anything else we can help with on this issue, shall we close this then?

    Best regards,


    Yes please go ahead and close thanks Mike

Viewing 13 posts - 1 through 13 (of 13 total)
  • The topic ‘Offset smooth scroll shrink sticky header’ is closed to new replies.