Streaming live at 10am (PST)

Help to create a sticky sidebar element


#1

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.

</script>
<script src="https://372d94ef7ef7a3a357669041a44ccc469300f7a9.googledrive.com/host/0B0sfq14gpwzPRVhEa1FUYmlYSVU/jquery.sticky.js"></script>
<script src="https://372d94ef7ef7a3a357669041a44ccc469300f7a9.googledrive.com/host/0B0sfq14gpwzPRVhEa1FUYmlYSVU/package.json"></script>
<script>
$(document).ready(function(){
$("#slider-information").sticky({topSpacing:0});
});
</script>

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

read only link https://preview.webflow.com/preview/inkfndry?preview=26bcfd6d07cd5a400b5b3f8d2e097811


#2

do you have a live link?


#3

URL for the source...not OP live site.
https://news.google.com/


#4

Hi guys, @Daniel_Schultheiss @Revolution

here is the live URL

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


#5

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


#6

ack... @Daniel_Schultheiss is faster is me !!!!

https://developers.google.com/maps/documentation/javascript/error-messages#checking-errors

https://developers.google.com/maps/documentation/javascript/error-messages#deverrorcodes

https://developers.google.com/maps/documentation/javascript/get-api-key


#7

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


#8

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


#9

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.


#10

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 ?


#11

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!


#12

@cyberdave I just did that!

Thoughts?


#13

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.


#14

thanks @cyberdave !!


#15

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 http://leafo.net/sticky-kit, 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


#16

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?


#17

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!


#18

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


#19

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


#20

I am I am, so desperately LOL... @Mikeyjay11