Have an element only show when another element is not on screen

Question

EDIT: I think I have confused some solutioners here, I would like to keep the first add to cart while hiding the second sticky one only showing when the first comes off view of the user

I essentially have 2 add to cart buttons, second add to cart only is visible <768px and showing at the bottom of the screen.

How would I make the second add to cart hide while the first add to cart is on the visible on screen

Also can this be done with only css

My code for the second sticky add to cart for reference

.sticky-add-to-cart{
    display: none;
}

@media only screen and (max-width : 768px) {
  .sticky-add-to-cart {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50px;
    top: inherit !important;
    z-index: 9999;
    display: block;
  }
}

Answer 1

.container {
  display: inline-block;
}
span {
  white-space: nowrap;
}
.button {
  position: sticky;
  display: inline-block;
  top: 0;
  left: 0;
}

<div class="container">
  <span>blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</span><br>
  <span>blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</span><br>
  <span>blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</span><br>
  <span>blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</span><br>
  <span>blah blah blah <button class="button">Button</button> blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</span><br>
  <span>blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</span><br>
  <span>blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</span><br>
  <span>blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</span><br>
  <span>blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</span><br>
  <span>blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</span><br>
  <span>blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</span><br>
  <span>blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</span><br>
  <span>blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</span><br>
  <span>blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</span><br>
  <span>blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</span><br>
  <span>blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</span><br>
  <span>blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</span><br>
  <span>blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</span><br>
  <span>blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</span><br>
  <span>blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</span><br>
  <span>blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</span><br>
  <span>blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</span><br>
  <span>blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</span><br>
  <span>blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</span><br>
  <span>blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</span><br>
  <span>blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</span><br>
  <span>blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</span><br>
  <span>blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</span><br>
  <span>blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</span><br>
  <span>blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</span><br>
  <span>blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</span><br>
  <span>blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</span><br>
  <span>blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</span><br>
  <span>blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</span><br>
  <span>blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</span><br>
  <span>blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</span><br>
  <span>blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</span><br>
  <span>blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</span><br>
  <span>blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</span><br>
  <span>blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</span><br>
  <span>blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</span><br>
</div>

Answer 2

If you want to show the second button when the user scrolls past the first button, then you will need some javascript to do that.

HTML

<button id="btn1"></button>
<button id="btn2"></button>

CSS

#btn1 {
  display: block;
}

#btn2 {
  display: none;
}

#btn2.show {
  display: block;
}

JS

var scrollAmount;
var btn2 = document.getElementById("btn2");
window.addEventListener("scroll", function() {
  scrollAmount = window.scrollY;
  if(scrollAmount > 768px) {
    btn2.classList.add("show");
  } else {
    btn2.classList.remove("show");
  }
});

768px is the scroll amount after which the first button disappears from the viewport.

Answer 3

You can take an atomic approach to this. Create a couple of helper classes which make the element that they're applied to visible only beyond a certain widths. You can reuse these classes in other components too, if need be.

.show-on-desktop{
    display: block;
}
.show-on-phone{
    display: none;
}

@media screen and (max-width: 768px) {
  .show-on-desktop {
    display: none;
  }
  .show-on-phone {
    display: block;
  }
}