How to create a floating element that scrolls with page

Hi Bubblers!

I am looking to create a floating visual element (social share) that scrolls with the page as a user reads through the article. You can see a visual example of this happening here.

Any suggestions or advice on how to accomplish this would be amazing. Thanks!

Screen Shot 2020-12-10 at 5.11.05 PM

1 Like

Hello @jj11

I know some plugins will match what you need but which one? :sweat_smile:

1 Like

Are you running into issues when using a floating group?

If you want it to stay static until a certain scroll position have been reached, you could just swap from a regular group to a floating group with a condition when the scroll position have been met.

2 Likes

Thanks! I’ll look into these.

1 Like

I got the floating group down, I just don’t know how to make it move with the scrolling position.

Take a look at the grey slider on the right side. It’s done with a drag/drop group and JavaScript.

Editor: https://bubble.io/page?type=page&name=slidable_menu&id=bsi-forum-app&tab=tabs-1

Demo: https://bsi-forum-app.bubbleapps.io/version-test/slidable_menu?debug_mode=true

2 Likes

Very cool! That’s pretty much what I am looking for. I appreciate you sharing the editor with me, but I haven’t worked with implementing javascript before. Can you give me any tips there? Thank you!

All you need is 2 regular groups (1 at the top position and 1 at the bottom position), and a floating group (all identical).

Just hide the regular groups when the floating group appears and vice versa. Just use page scroll positions to set up your hiding rules.

1 Like

@jj11 - its not too much JS to get started with this. First thing that I would is that you build the component that will be on the side of the page that scrolls. I did it the following way:

Floating group - I set mine to 550px high (make note of height as you will need this)
Shape 1 - this is the line showing the progress, make it 500px height and no more than 4px wide
Drag/drop group - this is clear and sits inside the floating group, constrain to parent and disable the ability to drag.
Shape 2 - this is the part that moves. I made mine 50px high, 10px wide and rounded the edges.

Next, you need to install a couple of items. You will need the Toolbox plugin and the Page Height plugin. Just look at the editor above to see the plugins to get the right one. Once you have installed these two items, you need to place the Javascript to Bubble element and the Page Height elements onto the page. In the Javascript to Bubble element, in the bubble_fn_suffix box, type in a name to reference. Document would work.

Now, go to the workflows tab and add a Page is Loaded workflow. Then add a Run javascript action from the Plugins tab to the workflow. Inside of the action, paste the following code:

function myFunction() {
var body = document.body,
html = document.documentElement;

var height = Math.max( body.scrollHeight, body.offsetHeight, 
                   html.clientHeight, html.scrollHeight, html.offsetHeight );
return(height);
console.log(height);
}

bubble_fn_meter(myFunction());

In the last line of the code, change the “bubble_fn_meter” to bubble_fn_suffix, or the name you put in the element on the page.

Now you need to build all the calculations to allow you to figure out what you need to do. I added a popup to house a few groups to hold all the numbers, so in the editor above, take a look at Popup A on the page to see what I did. Basically, create five groups and name them the following:

WinScroll - Type is Number and set the data source to Current page scroll position
Scroll Height Element - Type is Number and set the data source to your Javascript to Bubble element’s value
Client Height Element - Type is number and set the data source to your Page Height element’s value
Height Element - Type is number and set the data source to Scroll Height Element’s number minus(-) Client Height Element’s number
Scrolled Element - Type is number and set the data source to WinScroll’s Number / Height Element’s Number

Now that the math is calculated, go back to the workflow tab and add a Do every 5 seconds workflow. Change the interval (seconds) to 0.1. Then add a Move drag/drop group action to the workflow. Give it the following parameters:

Element: drag/drop group inside the floating group
Movement Type: Using coordinates
Left - x(px): 0
Top -y(px): Scrolled Element’s number * 450:rounded to 0
Duration(ms): 25

That will give you the sliding piece. One note, if you are looking at the preview with the debugger on, it messes with it. If you remove the debugger, it works fine. Let me know if you have any questions.

4 Likes

This is incredible, @jdiaz. Really appreciate your help with all of this!!! Thank you, sir.

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