Help to create a sticky sidebar element

Hi,

I wish to implement the following side nav sticky element on this google news page (top left):

https://drive.google.com/open?id=0B0sfq14gpwzPQl9lT3hTakVzNFk

I wish to apply to my element #slider-information, that when it hits the top on scroll it sticks. I have tried using sticky.js however my code is not working and it is appearing really buggy.

`

`

Can anyone lend a hand to help me out in solving this issue, as previous threads never helped.

read only link Webflow - Inkfndry

do you have a live link?

URL for the source…not OP live site.

Hi guys, @Daniel_Schultheiss @Revolution

here is the live URL

http://inkfndry.webflow.io/artist-subdomain/untitled

@bwalls1992

Thanks for providing the link.
Well there are some issues:

Oh and I dont know if thats a general issue, but place your style css element definitions in the “INSIDE HEAD TAG” not the body.

ack… @Daniel_Schultheiss is faster is me !!!

1 Like

i dont think you ll need the .json file from the .stickyjs script anyway. I downloaded it and included only the sticky.js and it works fine. So, remove that :stuck_out_tongue_winking_eye: -1 error msg

hey guys,

I dont know why this bit of script is not working. That link goes straight to the js file… but nothing is still not happenign on my page

Hi @bwalls1992, looks like there is at least one missing script tag:

put after the last document ready function on line 56, create a new line and add that. Put that before the new script tag to the jquery sticky.js.

Republish site for code change to take effect.

Thanks for that!

However still the same problem as when i first posted

http://inkfndry.webflow.io/artist-subdomain/untitled

Do you know what i am aiming for @cyberdave ?

Hi, @bwalls1992, there is also an interaction called “New interaction” on the slider-information div, could you set that to none and then republish?

Thanks!

@cyberdave I just did that!

Thoughts?

Hi @bwalls1992, I am checking, this might be related due to the styling on the sliding-information classs. I will post back after I check this.

thanks @cyberdave !!

Hi @bwalls1992, I have been looking and I think something strange is going on with the plugin where the div is getting restyled at run time, I am not sure, I will have to look at the plugin behavior more…

I would actually recommend Sticky-Kit | jQuery plugin for sticky elements, it is a lot easier to use, by just putting the slider info div into a parent element that it should scroll.

See an example implementation here: https://webflow.com/website/sticky-kit-integration

Thanks @cyberdave

This is what i currently have http://inkfndry.webflow.io/artist-subdomain/untitled

with the code:

However i want the sticky column to extend past the next section “#review-container” and not cut off. Any ideas?

Hi @bwalls1992, thanks for getting back, I would change the structure to put the all the content you want the sticky-column to extend, within the same parent container. I would structure it something like:

Section 1
Sticky-Column
Div (with Content)
Div (with Content)
Div (with Content)
Section 2

This way the sticky element will be stuck for the length of the three inner divs. I hope this helps!

Hey @cyberdave

Ive come back to this page and have implemeneted the following… However it doesnt want to stick for some reason, pretty confused as it was before. I have 2 console errors, but i removed them quickly to see if it was them and it wasn’t. I appreciate your patience.

I have placed “#sticky-div” within a column (green div box)

Preview link: https://drive.google.com/open?id=0B0sfq14gpwzPQl9lT3hTakVzNFk13
Live link: http://inkfndry.webflow.io/artist-subdomain/untitled

So stumped here

Hi @bwalls1992, are you trying to implement the Leafo sticky script?

I am I am, so desperately LOL… @Mikeyjay11