[Resolved] Floating button Add to cart button on single product page

[David]

Its there, just the sticky nav is hiding it.
Try this CSS it will move it in front of the nav and i have added a background to make it easier to see:

.findit:not(.is-found) + form.cart {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10000;
    background-color: #fff;
}

[nik9]

Awesome!

Now I‘m trying to get this from the top of the screen to the bottom with position:. But this it not working. Do i have to use other css settings?

Like this here: https://www.wehkamp.nl/anytime-lang-gewatteerde-jas-donkergroen-16507877/

I read, that I have to use position: fixed for this. In your css is this already. What do I miss here? 🙂

[David]

Replace top: 0; with bottom: 0;

[nik9]

This is working! 🙂

Now only one thing. The fade-out when the users scrolls down is very fast and it‘s not like on the mentioned page. I guess, that there they use it as sticky and stays when the user reach the position of the original button.

Is something also possible?

[David]

You can’t transition the change between the fixed and not fixed state.
That other site is actually using a separate element – like the Add to Cart Panel – and is simply fading one element out before the other one appears.

You could try adjusting:

(entry.boundingClientRect.top > 0)

and changing 0 to 0.1

This should delay the image going from fixed to static.

[nik9]

Hi david,

This has no effect of the delay.

// Scroll out of viewport
  if (entry.boundingClientRect.top > 0.1)

Anything other that I can try?

[David]

We could try this CSS to move the findit element down the page:

.findit {
    position: relative;
    bottom: -60px;
    pointer-events: none;
    z-index: -1;
}

Then edit this CSS to include the padding property to the fixed cart form:

.findit:not(.is-found) + form.cart {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10000;
    background-color: #fff;
    padding: 0 20px; /* add some left right padding */
}

Hopefully that makes it look like the button just attaches itself to the page on scroll.

[nik9]

Hi david,

Now it‘s far better. But the button still jumps a little.

I‘m trying with (entry.boundingClientRect.top > 0) and 0.1

But its the same.

[David]

You can try reducing the bottom: -60px; to a lower number eg. -65px
This will reduce the ‘gap’ between fixed and static.

But you can only take it so far – if you position it too low then the findit element will be below the button and will break the JS.

[nik9]

Yes, I already playing with these values. I can go to bottom: -67px; below it breaks the js.

So no chance for more smoothness? 🙂

Whats is better technical setup? 0 or 0.1 for (entry.boundingClientRect.top > 0)?

[David]

Ignore that – it was the totally wrong part of the script.
It would actually be this line that needed changing:

if (entry.isIntersecting) {

to

if (entry.intersectionRatio > 0.1) {

The value can be from 0 to 1 and determines how much of the element is in the viewport.
However, i cannot see this working. As our findit element is not ‘tall’ enough to be detected earlier or later.

I don’t think there is any other option here with this method.
I notice when scrolling normally it looks great – its only when we look at it like a dev/designer and scroll at a snails pace is the jump noticeable.

[nik9]

Hi David.

Nice! So i set the value to 0.9 and also change some value of your CSS. With bottom: -20px the sticky add to cart is now very smooth because the whole container is 20px further down.

.findit:not(.is-found) + form.cart {
    position: fixed;
    bottom: -20px;
    left: 0;
    right: 0;
    z-index: 10000;
    background-color: #fff;
    padding: 5px 20px; /* add some left right padding */
}

Looks now awesome, even when we look at the snails pace. 🙂

What you think. Is this a good idea to put -20px or are there maybe sideeffects?

[David]

Well that works surprisingly well – tested it and cannot see any issues with that.

[nik9]

Yeah Me neither.

Thank you David. Awesome support!

Cheers

[David]

Glad to be of help.

[Author]

Posts