Display add to cart panel on scroll transformation

Hi there,

its not possible to change where the transform position occurs as the sticky add to cart has to start off screen, it then calculates the height of the header to work out where to move to.

But you could try this CSS:

.add-to-cart-panel {
    transition: opacity .5s ease-in-out !important;
}

Then the panel will just fade in below the header.

Hi David,

Cool! It work as wanted. But only the fade in works. The fade out is not like a "fade out" its more a instantaneous disappearance. How do I have to adjust the fade out CSS?

Nope - don't think its possible - i tried a few methods to 'delay' the outgoing transition - but they all failed lol

Hey Dave

Haha lol. Maybe Tom has a idea for this?

Cheers

I'll ask him ;)

Yejj, Thanks 😎

Tricky one..

I fixed the fade out with this CSS:

.add-to-cart-panel {
    transform: translateY(65px);
}

Problem there is the element sits under the header with no opacity, but you can still click on things.

There isn't a class that is added/removed when it displays/hide, which would allow us to fix that.

I've made a note to get a class added dynamically in GPP 1.12.0.

Perfect! Thank you so much! :)

P.s: Do we have to change something after you would implement the class or is everything fine?

Cheers

Shouldn't have to. Careful with the CSS I wrote above though, the element always exists below the header and can be interacted with even though it's not visible.

Thanks :)

Hi Tom,

Now I found the first problem. The sub pages from the Navigation node "Partner" can't not be selected. Hover on "Parter" will show the child navigation nodes. But they disappear when we try to select one of them. :(

We use this css here, it works well except this navigation error...

.add-to-cart-panel {
    transition: opacity .5s ease-in-out !important;
}
	
.add-to-cart-panel {
    transform: translateY(85px);
}

@media (max-width: 767px) {
    .add-to-cart-panel {
margin-top: 56px
    }
}

@media (max-width: 768px) {
    .add-to-cart-panel {
        bottom: auto;
        top: 0;
        -webkit-transform: translateY(-100%);
        -ms-transform: translateY(-100%);
        transform: translateY(-100%);
transform: translateY(56px);
    }
}

Update:

I have to remove your code Tom. The side effects are to high.
Is there a other option to get this to work without sideeffects?

.add-to-cart-panel {
    transform: translateY(85px);
}

Not at this time, unfortunately. We'll need to modify to javascript to allow for more effects.

I'll make sure this is added to 1.12 :)

Okei. Cool thanks.

When will 1.12 available? :)

Cheers