[QUESTION/HELP]Stick element below another sticky element

[johnsonthedev]

Hi, am trying to stick an element below another element. I am sure this can be done with this package but I feel I do something wrong.

Can anyone help ?

Here my html

<div id="sticky-app">
   <div id="sticky-navigation" style="height:80px">Navigation</div>

   <div id="sticky-content" style="height:1500px">
       <div id="sticky-element">
          <div style="width:150px;height:150px;background-color:black">sticky element</div>
       </div>
    </div>
 </div>

my goal:

-> sticky-navigation is top:0 -> sticky-element sticks below navigation

here is what I tried -- this.$sticky is reference to : hc-sticky

let Navigation = new this.$sticky("#sticky-navigation", {
  top: 0
});

let Content = new this.$sticky("#sticky-content", {
  stickTo: "#sticky-app",
  innerSticker: "#sticky-navigation"
});

let Element = new this.$sticky("#sticky-element", {
  stickTo: "#sticky-content"
});

but it doesn't work.. Can anyone help ? Much appreciated !!! THX

[7iomka]

same issue...Any help?

[fallenturtle]

I did something similar for my site. What I did depends on the top element having a fixed height and then I used innerTop to offset the bottom element.

jQuery(document).ready(function($){
    $('#top-element').hcSticky({stickTo: '#parent'});
    $('#bottom-element).hcSticky({stickTo: '#parent', innerTop: -71});
});

[somewebmedia]

If this is still relevant, some jsfiddle would be helpful to understand what you're trying to do.

[johnsonthedev]

Hey, I don't use this lib anymore. if it was just us three I guess it's not that common :-) Feel free to close it, still think it would be a cool feature tho.

A simple example: Instead of setting a top value like "top: 80" I want to stick it relative to another element. if the "parent" element has a height of 100px it should be positioned at top:100

It should be possible to chain elements. So If a parent is also positioned relative to another element it should consider its height for all following elements:

Element 1 - height: 80px - top: 0 Element 2 - height: 20 - top:80 Element 3 - height 50 - top:100 ...

https://jsfiddle.net/7ykr28wn/