Lay Theme Forum

Hi @ml
I remember there was a problem with setting the z-index, i havent found any solution and as I'm not working with Laytheme now i can't help, sorry. Good luck !

Hi @felix_rabe
I don't remember getting this kind of error.

But from what I remember, there was a kind of error that appaered but was actually not problematic for the website. But I don't know if this occured when i was doing the sticky stuff.
Good luck !

! Edit !

An element with a sticky position will add a new problem : the content that comes after this sticky element will jump up.

THE PROBLEM :

When you add a "position : sticky;" to any content in the grid, it removes it from its place and sticks it at the top of the page. This is why the rest of your content jumps up - the "sticky element" is not where it was anymore, the area is considered free for the next content of your grid.

SOLUTION :

I have created a new Class called ".nav-wrapper", and add to it the same height as my ".sticky"
Here are now the two class (in the CSS section)

/* sticky position */
    .sticky {
        position: -webkit-sticky;
        position: sticky;
        top:0px;
        height:500px;
    }
    
    /* avoid jump up with sticky element : 
    put the <div class="sticky"></div> inside of a <div class="nav-wrapper"></div>
    give them the same height*/
    .nav-wrapper {
        top:0px;
        height:500px;
    }

You are done with the CSS customization

Now you need to go to your page editor, select the element you want to get sticky and remove the html class "sticky"

Then, go to your text editor
*/!\ I have no idea of how it could work with image/video, good luck/!*
In your text editor, open the source code and add the following code :

/* add this -->*/ <div class="nav-wrapper"><div class="sticky"> 
<p></p>
</div></div> /*<-- add this */

• It works !

note : I recommand to add a "background-color" to your .sticky and .nav-wrapped while you are working on it, just to get a better understanding of what is happening

note 2 : I'm new in coding with html / css, I hope my explanation are not false and understandable, but anyway, it works !

source : https://stackoverflow.com/questions/28864210/sticky-navigation-element-jumps-during-scroll

HOLY SHOT

I've found a solution, so I answer here to every users who will be as lost as I was !

I recommand this page to unerstand how Sticky works :
https://elad.medium.com/css-position-sticky-how-it-really-works-54cd01dc2d46

• First, forget about the "overflow" problem, there is nothing to do with it.
• Add this to the HTML section

<script>
jQuery (document).ready(function() {
  var stickyTop = jQuery ('.sticky').offset().top;

  jQuery (window).scroll(function() {
    var windowTop = jQuery (window).scrollTop();

    if (stickyTop < windowTop) {
      jQuery ('.sticky').css('position', 'fixed');
    } else {
      jQuery ('.sticky').css('position', 'relative');
    }
  });
});
       </script>

• Add this to your CSS section :

.sticky {
    position: sticky;
    top: 0;
}

• Now you can add the class "sticky" to your element in the grid.
• It works !