Floating button Add to cart button on single product page

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;
}

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? :)

Replace top: 0; with bottom: 0;

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?

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.

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?

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.

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.

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.

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)?

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.

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?

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

Yeah Me neither.

Thank you David. Awesome support!

Cheers

Glad to be of help.