Making a fixed element scroll out of view

Design help General
1

Hi!
I’m trying to recreate wired magazine’s social media share bar on my webflow site.

724×988 47.6 KB

I’d like the bar to scroll until it’s about 200 px. away from the top of the browser window, then become fixed, then start scrolling out of view when the next section scrolls into view.
Something like this: Dang, Tokyo Cabbies Sure Know How to Power Nap | WIRED
I can’t figure out how to do this with interactions so I think it might have to be done with code…
Can anyone help me? @bart?..

Here’s my preview link: https://preview.webflow.com/preview/mept-trabalho?preview=6f5dc3d4293c275dda09cf240577d3b1

The social media bar is on page “Notícia”.

668×906 13.6 KB

2

Hey @Filipa

You can do this pretty easily with a bit of custom code.

2 options really:

  1. If you’re comfortable with a bit of jQuery, check out this instructional article on Treehouse:
    How to Create a Sticky Navigation [Article] | Treehouse Blog

  2. If you’d rather use a plugin to recreate the effect i’d recommend Sticky JS (http://stickyjs.com or GitHub - garand/sticky: jQuery Plugin for Sticky Objects)

All you’ll need to do is add the necessary script (its on the front page of the sticky js page) into the custom footer code section. Just remember to change the “#sticker” declaration to whatever ID you give your social bar in webflow!

3

Hi @EvanJones
I don’t know any jQuery or JavaScript! I checked the second option, copied and pasted the code in the footer section, changed the id and the pixel value but it’s not working… I’m probably missing something…
Also, I noticed there’s an option to unstick the object. Where should I put this snippet and how can I style it so that the social bar unsticks when the next section scrolls in?
Can you check my website and help me?
Thank you

4

Hey @Filipa

No problem - happy to help.

Firstly, you put “socialbar” in the script: it actually needs to be “#socialbar” as below, so that jQuery knows its looking for a Div ID:

The sticky code won’t work in the webflow preview, so you’ll have to publish your changes & check out the live site to see whether its now functioning.

I’ll have a read about the unstick property on GitHub tonight & see if I can write a few lines of code for you for this too :smiley:

1 Like
5

Hi @EvanJones
I added the “#” and published the site but the social bar is not sticking: http://mept-trabalho.webflow.io/noticia
Thank you :smiley:

6

Hi @Filipa

Sorry, was half awake when I looked at your script before!

2 more actions to get it working:

  1. Remove the first line:
    <script src="jquery.js."></script>

  2. Replace the seoncd line with:
    <script src="https://raw.githubusercontent.com/garand/sticky/master/jquery.sticky.js"></script>

And leave the document ready script as it is. Should all be working then :slightly_smiling:

7

Hi @EvanJones
Thanks, but it’s not working :pensive:

This is what I have:

`

`
8

Hi @Filipa

Ok no problem, let me make a test site & see if I can get it working

9

Thank you @EvanJones :smiley:

10

OK i figured it out!

Heres my working example: http://stick-element-test.webflow.io/

In short, just do the following:

  1. Add the below to custom header code section
    <style> .fixed { position: fixed; top: 200px; z-index: 100; } </style>

  2. Add the below to custom footer code section
    <script> $(document).ready(function(){ $(window).bind('scroll', function() { var navHeight = $( window ).height() - 70; if ($(window).scrollTop() > navHeight) { $('#socialbar').addClass('fixed'); } else { $('#socialbar').removeClass('fixed'); } }); }); </script>

Just make sure your Social Bar has the ID “socialbar” in the DIV settings window & it should work just fine.

11

Thanks @EvanJones
It’s sticking but the bar becomes bigger and shifts to the right: http://mept-trabalho.webflow.io/noticia

12

No problem!

Its changing the size because at present you have the DIV inside a column, which is constraining its width. As soon as it becomes fixed it’s removed from the column and will expand a little. Easy enough to fix though :slight_smile:

First move it out of the column its in as below:

Then you’ll need to change the size & positioning of the DIV so that it sites on the right of the page. Here’s a rough guide:

Float: right
Position: relative
Margin-right: 50px (or there abouts, play with it till you’re happy)
Width: i used 260px, but use whatever works best for you

Here’s how it looked when I did it for reference:

240×834 44.5 KB

Play around with the position settings until you’re happy with here it sits on the screen & all should be good. Personally I like social bars that are right against the right or left side of the screen, but i’ll leave that up to you!

13

Hi @EvanJones, thanks :smiley:
It’s almost there!
I changed some values in your code to make the transition smoother but it’s still a bit “jumpy” on the Ipad. Is there a fix for this?
Did you figure out how to unstick the bar when the next section scrolls in?
Thank you so much!

14

Just checked it again on iPad and iPad Pro and the bar scrolls all the way to the top and then suddenly appears and sticks. Can this be fixed?

15

Hey Filipa

Javscript fixes for tablet is a little bit advanced for me i’m afraid!

Might be worth checking with some of the more code-fluent members of the forum like @PixelGeek or @cyberdave

Any ideas fellas?

16

Hi @EvanJones, good morning!
That’s ok, thanks anyway :smiley: You already helped a lot…
I’ll wait and see if one of webflow’s code gurus can help me fix this!

17

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