How to prevent hidden button blocking links from being clicked

Question

I'm using the below code to add a "back to top" button that appears after scrolling past a certain point on the page. The issue is that this button is blocking my CTA button from being clicked on the top part of the page on mobile because even though it's hidden it's still there. I've discovered that this is due to the fact I'm using "z-index: 10" but if I remove that then the back to top button appears under the rest of the content on the page.

How can I ensure the button doesn't block any other content while hidden or completely remove it from the page until you scroll past a certain point? Is this possible with js? I'd like to avoid jquery if possible.

myID = document.getElementById("myID");

var myScrollFunc = function () {
    var y = window.scrollY;
    if (y >= 700) {
        myID.className = "bottomMenu show"
    } else {
        myID.className = "bottomMenu hide"
    }
};

window.addEventListener("scroll", myScrollFunc);

.bottomMenu {
    position: fixed;
    bottom: 0;
    z-index: 10;
    transition: all 1s;
}
.hide {
    opacity:0;
    left:-100%;
}
.show {
    opacity:1;
    left:0;
}
.sticky-divi-button {
color: #ffffff;
font-family: "Roboto";
font-size: 18px;
background-color: #f5a623;
border-radius: 30px;
Letter-spacing: 0.8px;
text-transform: uppercase;
text-decoration: none;
box-shadow: 0px 25px 28px -21px rgba(194,180,190,1);

padding-left: 30px !important;
padding-right: 30px !important;
padding: 20px 3%;
z-index: 10;

position: fixed;
bottom: 40px;
right: 40px;
}
@media (max-width: 767px) and (min-width: 0px) {
.sticky-divi-button {
bottom: 10px !important;
right: 10px !important;
}
}

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><div id="myID" class="bottomMenu hide"><a href="#" class="sticky-divi-button">GET STARTED</a></div>

Answer 1

I modified css structure.

myID = document.getElementById("myID");

var myScrollFunc = function () {
    var y = window.scrollY;
    if (y >= 700) {
        myID.classList.add("show");
    } else {
        myID.classList.remove("show");
    }
};

window.addEventListener("scroll", myScrollFunc);

.bottomMenu {
    position: fixed;
    left: -100%;
    bottom: 0;
    z-index: 10;
    transition: all 1s;
}

.bottomMenu .sticky-divi-button{
  right: -100%;
}

.bottomMenu.show .sticky-divi-button{
  right:2%;
}

.sticky-divi-button {
color: #ffffff;
font-family: "Roboto";
font-size: 18px;
background-color: #f5a623;
border-radius: 30px;
Letter-spacing: 0.8px;
text-transform: uppercase;
text-decoration: none;
box-shadow: 0px 25px 28px -21px rgba(194,180,190,1);
padding-left: 30px !important;
padding-right: 30px !important;
padding: 20px 3%;
z-index: 10;
transition: all 1s;
position: fixed;
bottom: 40px;
right: 40px;
}


@media (max-width: 767px) and (min-width: 0px) {
.bottomMenu.sticky-divi-button{
bottom: 10px !important;
}

.bottomMenu.show .sticky-divi-button {
right: 10px !important;
}
}

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

<div id="myID" class="bottomMenu"><a href="#" class="sticky-divi-button">GET STARTED</a></div>

Answer 2

The answer is as simple as adding pointer-events: none; to your css (on the hidden state). It will prevent any interactions with the element, allowing you to "click through" it. :)