Streaming live at 10am (PST)

CSS3 Position Sticky


#1

Hey everyone, a little stuck here! I found this tutorial on forum for using CSS to make a sidebar sticky. After running through the tutorial here I'm a bit stumped! I've imported the Sticky CSS code into my custom settings and I can't seem to get it working. If anyone can give me a hand I would so appreciate it! This has me scratching my head

https://preview.webflow.com/preview/sticky-scroll?preview=1caa9c37342aacca9788bdc6d3b366ab


#2

Have you published your site? And the support table looks bad for this :confused: Unless you use JS for this?


#3

I have it's here:

http://sticky-scroll.webflow.io/

This person did it correctly here:

Webflow also uses it on their video tab for navigation here:


#4


#5

Thank you guys so much!

I ended up using this tutorial

http://sticky-sidebar.webflow.io


#6

Link doesn’t seem to be working.


#7

http://sticky-scroll.webflow.io/

Oh sorry! I copied the wrong link! The one above is correct!


#8

Thank you this worked out perfectly for what I needed and the result was great!

http://inspacecreative.webflow.io/planner


#9

bro! how did you get yours to work I still haven’t been able to lol


#10

thats so funny you got it to work! I love your website to it works great for that


#11

love the scroll and the menu slides to hightlight accordingly so nice! how did you do that too!!! Dude!!!


#12

Thank you! I realized I posted the wrong link twice. I used the link you showed me https://webflow.com/website/Example-of-Sticky-Left-Menu-for-cloning

First I put this into my head code in project setting so that it was site wide.

<style>
 .sidebar {
 position: -webkit-sticky;
 position: sticky;
 top: 0;
}
</style>

Then I put the an unordered list into a div that is set as flex child to 20% and named the divblock class sidebar just as it is in the code above. You could change the code to whatever your div class name is though. Finally, I just added the right amount of to the top and bottom so it sat flush with the sections I made.

As far as the highlighted menu, I just put list items in an unordered list element then a link text inside of each of those. Once that was done I created each section (res sec ind wrapper is the class) and gave it the appropriate ID for in-page linking then set each link in the unordered list to its respective section. Finally, I just made the current state section have a darker font and a 2px boarder on the left side. If you take a look at my read only link it’s pretty self explanatory but if you have any questions let me know and I can help you out!

Here is my read only link so you can see what I’m talking about
https://preview.webflow.com/preview/inspacecreative?preview=d3550b3e31c79785b805d73fc0d71f36


#13

Awesome! Thanks so much! It was the class id’s that I didn’t do correctly, thanks for the fast reply have a great night :facepunch::v: