Vertical social sharing buttons floating next to content

[ewisely]

Hi,

I’m trying to create on my own a floating vertical bar that contains social sharing buttons but I only managed to create one that floats with reference to the browser by using position: fixed; left: 0; top: 250px;

Is there any way that I can use plain css to make that vertical bar always appears just next to the content regardless of sizes of screens or browsers like this page at https://www.addtoany.com/buttons/customize/floating_share_buttons?

I’d appreciate if anyone can help me. Thanks.

P.S. I don’t want to use services from AddThis or AddToAny, I just want to create on my own.

[Paulie_D]

With pure CSS…not really.

Oh you can create a bar that will sit next to an individual piece of content but you have to make a separate bar for each piece…and that’s pretty silly.

Unless I’ve misunderstood what it is you are trying to do…unfortunately the site you linked is down right now.

You could have Javascript pull a single bar whenever you need it (which is probably what these services are offering) but that’s not what you want.

Frankly, there’s nothing wrong with your first fixed bar.

[ewisely]

Hi Paulie,

Thanks for responding to my message. Well, the page is working fine:

https://www.addtoany.com/buttons/customize/floating_share_buttons

In case that link doesn’t work, please check out this image I’ve uploaded via a free site.

I hope you can take a look at that floating social buttons just next to the content. And when you scroll down or up the page, those buttons remain on the same position.

If CSS alone can’t get it work as I expected, any suggestion on Javascript? I’m not good at that, honestly. Thanks for your help.

[Paulie_D]

Oh, I get the link now…it was down before.

This bar will sit next content and scroll up and down with it…is that what you are trying to do?

Like this…

The following example displays a vertical share bar that is fixed relative to a parent element (usually the site’s main content), 150 pixels from the top of the page, and offset from the left of the parent element by 100 pixels. The parent element needs to have a specified width, and the vertical share bar code should placed as a descendant of that element as in following example. The current page displays this style on devices with a wide enough screen.

All that is needed is to give the parent position:relative and the bar position:absolute…then move it into what ever place you want with positioning values.

[ewisely]

Hi Paulie,

When you visit that page at https://www.addtoany.com/buttons/customize/floating_share_buttons, please scroll the page up and down, the bar will stay there and not disappear. And then resize your window horizontally and you’ll see the bar will always stay by the side of the content.

I want to know how that can be done. Perhaps let me show you a sample of my code. It looks something like this:

.parent {position: relative;}
.sharebar {position: fixed; top: 150px; left: 100px;}

In html,

<div class="parent">
<div class="sharebar">share buttons</div>
</div> <!-- close parent -->

This will fulfill the bar staying at a fixed position and always be visible no matter how far you scroll down the page, but it will always take reference from the left of the browser window.

If I use position: absolute, then that would become:

.parent {position: relative;}
.sharebar {position: absolute; top: 150px; left: 100px;}

In html,

<div class="parent">
<div class="sharebar">share buttons</div>
</div> <!-- close parent -->

Now the bar takes reference from the parent element, but once you scroll down the page, the bar will just move up and disappear.

I want the bar to be able to stay visible regardless of the vertical scroll and always take reference from the parent element. Can that be done with pure CSS or it actually requires Javascript? Or have I misunderstood your meaning? Maybe you can show me a sample code so I can try out and see if it works or not?

Appreciate your help. Thanks.

[Paulie_D]

I want to know how that can be done. Perhaps let me show you a sample of my code.

You can use Codepen.io for that.

I want the bar to be able to stay visible regardless of the vertical scroll

Well you did that with a fixed position bar…all you have to do now is move the position to where you want it by the content.

It doesn’t need to be in the parent…in fact, it probably shouldn’t be.

[Author]

Posts