▼
Streaming live at 10am (PST)

How can I fix a floated element?

#1

I want to replicate the behaviour of the advert in the right hand column on this page:
http://www.wired.co.uk/article/wired-awake-140716

...it appears to float to the right, then when you scroll, the ad stays in place so that it is always visible when the user is reading the article.

I'd like to apply the same principle to ads/other elements on my own blog pages here:
http://www.jamiedunmore.com/blog/star-wars-bb-8-illustration

Thanks for any help

#2

Have the item on position:fixed

Hope this helps. :sunglasses:

#3

Thanks Valdimir, but that doesn't quite achieve the effect I want.

Looking again at the example here: http://www.wired.co.uk/article/wired-awake-140716

...the ad is initially static, so scrolls with the rest of the page until it reaches a certain position - in this case, directly beneath the navigation bar - it then fixes position. Then when you scroll much lower, it becomes static again, scrolling with the page. I need to achieve this effect.

Thanks

#4

Can anyone offer a solution to this?

#5

jQuery takes care of this pretty easily, use the Sticky Plugin.

#6

That's great, thank you.

I'm very new to JQuery - how would I make this work in Webflow?

Thanks

#7

This topic was automatically closed after 60 days. New replies are no longer allowed.