Enabling plugin stops position: sticky from working

  • Resolved jacobbannier

    (@jacobbannier)


    4 years, 7 months ago

    I am using the CSS position: sticky to have an inner-page navigation. However, enabling this plug-in stops it working. Here is an example :

    https://www.sourcingelements.com/slider-test-broken/

    With the plugin disabled this page works fine, and enabled it stops working.

    I’ve tried the legacy and JS options but with no luck. I’ve read the docs of the slidebars project and can’t find anything too relevant. Any help would be appreciate, but it’s not a pressing issue as I appreciate this is a free plugin. If I find a solution I’ll post on here.

    Cheers

    • This topic was modified 4 years, 7 months ago by jacobbannier.
    • This topic was modified 4 years, 7 months ago by jacobbannier.

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

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

    (@keraweb)

    Hello @jacobbannier

    First of all, thank you for your review!

    I have checked the issue and this is related to CSS overflow: hidden; which this plugin uses quite extensively in order to prevent double scroll bars.
    I’ll have to think about how to solve this without breaking other sites…

    I created a bug report on the GitHub repo and hope to give this some dev time a.s.a.p.
    https://github.com/JoryHogeveen/off-canvas-sidebars/issues/83

    Closing here in favor of GitHub.
    Thanks for reporting!

    Cheers, Jory

    Plugin Author Jory Hogeveen

    (@keraweb)

    Oh, one thing you could try is to overwrite this plugin’s CSS for the html, body and canvas elements to they are set to overflow:visible.
    No idea why this would be required for sticky elements but apparently browsers work that way haha.

    Cheers, Jory

    Thread Starter jacobbannier

    (@jacobbannier)

    Hi Jory,

    Thanks for your quick reply. I’ll try and take a look into what you mentioned and see if I can find a work-around before/incase this can’t be fixed.

    Edit:

    I implemented overflow: visible on the body and container and it seemed to work. It says in your code the overflow: hidden is for help with when page height isn’t >100%, which in my case isn’t any page. Obviously not an ideal fix but it’ll do for now.

    For anyone with the same problem, try adding this css to your site (at your own risk):

    body{
	overflow: visible !important;
}
[canvas=container], .ocs-initialized [canvas=container]{
	overflow: visible !important;
}

    Cheers

    • This reply was modified 4 years, 7 months ago by jacobbannier.
    Plugin Author Jory Hogeveen

    (@keraweb)

    @jacobbannier

    I’ve made a patch. Could you please test this as well?

    More info/discussion: https://github.com/JoryHogeveen/off-canvas-sidebars/issues/83
    Patch: https://github.com/JoryHogeveen/off-canvas-sidebars/commit/d4f038051237d8a6b7fc435d32b8389fe996dccc

    Cheers! Jory

    Plugin Author Jory Hogeveen

    (@keraweb)

    Hi @jacobbannier

    Please let me know if the patch works for you.
    If it does I’ll look into releasing a 0.5.x version a.s.a.p.
    Otherwise it will go together with a larger 0.6 version when ready.

    Cheers, Jory

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Enabling plugin stops position: sticky from working’ is closed to new replies.