I want to hide one element when another one appears (IN CSS IF POSSIBLE) =)

Store Design
1

There is an element called “Bottom bar”, it is a sticky:

1.png
1.png376×792 20.8 KB

so far so good. When we go to any product page, another sticky element appears as soon as we scroll down a bit. This element is called “Sticky Add to Cart” and it overrides the “Bottom bar” element:

2.png
2.png377×850 45 KB

I want the “Bottom bar” to leave the page with the command “translateY()” as soon as the “Sticky Add to Cart” appears. And go back to the starting point when “Sticky Add to Cart” comes out.
The command in this case will be done only for the “Bottom bar”.
Sorry for the English, I’m using google translator :slightly_smiling_face: And I’m a complete beginner.

2

@PaulCur

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community! :blush:
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

3

URL site:

olivvain.com

Please put in mobile view to activate the “Bottom bar”

4

@PaulCur

thanks for URL

i have check but o can’t see now at bottom

5

Oh yes! I’m working on the site every day… but now it’s there, just go in and see :slightly_smiling_face:

6

@PaulCur

yes i have check different system but doesn’t see i don’t why