Issue with Offset parametr

  • Resolved WebDocopy

    (@webdocopy)


    3 months, 2 weeks ago

    Hi Malihu,
    Could you please help me to debug issue with Offset parameter. I have page with anchor on the top of the page (Najít, co potřebujete). When I set #header-sticky as offset it didn’t work properly. The offset doesn’t correspond to the height of the sticky header. I use positioning for sliding effect (top: -90px for hiding and margin-top: 90px to show up the sticky header). I tested this issue with top: 0 and no margin and it works. I guess it has something to do with positioning.
    Thank you for your help.
    BR
    Tomas

    The page I need help with: [log in to see the link]

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Author malihu

    (@malihu)

    3 months, 2 weeks ago

    Hello Tomas,

    Indeed, the sticky header position causes the issue. The CSS rules top and margin-top that are used in order to show/hide the sticky header change the actual flow of the elements in the document. This causes the scrolling position to change depending on the visibility of the sticky header (e.g. when sticky header is visible, the offset works correctly when clicking the link).

    The easiest way to solve this is to change the sticky header visibility from CSS top and margin-top to the transform CSS property, as this property does not affect the document flow or element position.

    So, just add this to you CSS: 

    header#header-sticky{
	top: 0;
	transform: translateY(-90px);
}

header#header-sticky.visible{
	margin-top: 0;
	transform: translateY(0);
}

    Let me know 🙂

    Thread Starter WebDocopy

    (@webdocopy)

    3 months, 2 weeks ago

    Hi Malihu,

    thank you for your prompt reply. Yes, it works.

    For the next time in case I am using your plugin I should use only translateY for css sliding effect?

    BR

    Tomas

    Plugin Author malihu

    (@malihu)

    3 months, 1 week ago

    You’re welcome 🙂

    It’s usually better to use translateY for such functionality because it performs better than position, margin etc. and it doesn’t affect elements position and page layout.

    Plugin Author malihu

    (@malihu)

    3 months, 1 week ago

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

    Thread Starter WebDocopy

    (@webdocopy)

    3 months, 1 week ago

    ok. Thank you for your help.

    Tomas

Viewing 5 replies - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.