Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • January 26, 2019 at 11:10 pm #1059261
    DanielCPalmer

    Hi all, I’m trying to avoid adding JavaScript and using the “position: sticky” element to make a sidebar navigation sticky when it reaches a scroll threshold on the page. I haven’t found any answers on Enfold support, but all of my testing doesn’t seem to work. I’m using info from this tutorial, but I must be missing something in the Enfold code. It works great without Enfold.

    Any thoughts?

    January 27, 2019 at 10:02 am #1059325
    Guenni007

    the biggest problem is that position sticky is not well supported on ever browser:
    https://caniuse.com/#search=sticky

    You can reach it with Javascript. And on a quick and dirty function i got this. But it does not respect the resize function.
    see result here: https://webers-testseite.de/scrolling/

    if this is no problem for you – i will tell you how to.

    January 27, 2019 at 11:49 am #1059331
    Guenni007

    but afaik has Enfold included the waypoints script – there is an existing sticky script to it. But i never worked with it.
    maybe a mod knows how to use the waypoints script to have sticky elements

    January 27, 2019 at 6:33 pm #1059400
    DanielCPalmer

    Guenni, thanks for the reply. I’m aware of browser implications of the sticky CSS. I’m just trying to understand why it doesn’t work in Enfold, even in a code block section. When I change the theme or use on a different WP site, it works great. That’s the answer I’m after. I’ll deal with browser fall out.
    Thanks.

    January 29, 2019 at 3:37 am #1059872
    DanielCPalmer

    Any help from Enfold support please?

    January 30, 2019 at 4:52 pm #1060544
    Guenni007

    it is the overflow rule on Enfold which breaks the sticky element.

    https://webers-testseite.de/sticky-elements/

    i have set for that page :

    .responsive body.page-id-33933 {
    overflow-x: visible;
}

.page-id-33933 #wrap_all {
    overflow: visible;
}
    January 30, 2019 at 5:11 pm #1060551
    DanielCPalmer

    Guenni,
    I’m not sure if you work with or for Enfold, but you’ve been very helpful. This seems to work great. Thanks for the fix! I couldn’t find it.

    January 30, 2019 at 5:30 pm #1060560
    Guenni007

    Now all you have to do is select the right elements.
    The wrapper must be the parent element of the sticky elements.
    I will test it with color-section now and flex-columns.

    January 31, 2019 at 11:22 am #1060888
    Guenni007

    i did it here with a sidebar:

    https://webers-testseite.de/buttons/

    and we have to change the overflow rule ( the #top has to be present in the rule) to ( in this case only for that pages): 

    .responsive body#top.page-id-29934,
.responsive body#top.page-id-33933 {
    overflow-x: visible;
}

.page-id-29934 #wrap_all,
.page-id-33933 #wrap_all {
    overflow: visible;
}

    The sticky goes to the sidebar itself – but to find the right parent is a bit different – on that case:

    .page-id-29934 .container_wrap.sidebar_right {
  display: flex;
  justify-content: space-around;
  align-items: flex-start;
}

.page-id-29934 .sidebar  {
  position: -webkit-sticky;
  position: sticky;
  bottom: 0;
  align-self: flex-end;
  width: 25% !important
}

    The only thing – flex does change something to width definition – the sticky element needs the width info of enfold basic setting – in my case 25%

    January 31, 2019 at 11:44 am #1060900
    Guenni007

    the other way round – sidebar sticks on flex-start with a top position that it is visible will be nice too:

    .page-id-29934 .sidebar {
    position: -webkit-sticky;
    position: sticky;
    top: 80px;
    align-self: flex-start;
    width: 25% !important;
}
    January 31, 2019 at 12:56 pm #1060943
    Guenni007

    Ah – one thing to mention: if you show the sidebar on mobile phones ( small screens) these rules have to be in media querries to have the normal behavior on responsive case

    @media only screen and (min-width: 767px){
.page-id-29934 .container_wrap.sidebar_right .container {
  display: flex;
  justify-content: space-around;
  align-items: flex-start;
}

.page-id-29934 .sidebar  {
  position: -webkit-sticky;
  position: sticky;
  bottom: 0;
  align-self: flex-end;
  width: 25% !important
}
}
  • Author
    Posts
Viewing 11 posts - 1 through 11 (of 11 total)
  • You must be logged in to reply to this topic.