Sticky element

[Sophie1000]

Hello everyone,

first, I know there is several topics about Sticky function on Laytheme.
I've been looking for a solutions through them, but every topics takes end with the same conclusion : It doesnt work yet, and the LayTheme developer are working on a lay option.

So, I'm trying hard on it, and what I've found is this script :

    <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>

then, I understood that maybe the "sticky" function doesnt work because of the overflow, so i've added this :

#grid {
overflow : auto !important;
}

As it doesnt make any difference, I've tried to inherite / unset the overflow, and even to apply this to the grid-inner and to the html (I don't know if it makes sens but anyway, it doesnt change anything as well...)

Nonetheless, i've noticed that something is happening with my sticky element : when I scroll down, it disappears in a strange way
I let you check that : http://www.borders.digital/25-2-2

It makes me think that something could work.

As I'm still a novice, I'm asking for help,
Does anyone understand better than me what is going on ?
What could I change ?

And if any Lay Developer come here : Is a Sticky option will be released in a near future ?

Thank you for reading !

[Sophie1000]

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 !

[Richard]

Dear @Sophie1000

Thank you so much for the great post!

Best wishes
Richard

[Sophie1000]

! 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

[ml]

Hi @Sophie1000 and everybody else!

Thanks for your work on this!
Making an element sticky works, only I still have an issue with the z-index, causing the sticky element also to disappear behind other content. Setting it in css doesnt work.

Any chance you found a solution for that?

Best,
Marius

[felix_rabe]

@Sophie1000
I get this error, maybe you got it too:

TypeError: undefined is not an object (evaluating 'jQuery ('.sticky').offset().top')

[Sophie1000]

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 !

[Richard]

Thank you for the update @Sophie1000 ! 🌝