javascript - 如何防止隐藏按钮阻止链接被点击

Question

我正在使用下面的代码添加一个“返回顶部”按钮，该按钮在滚动到页面上的某个点后出现。问题是此按钮阻止我的 CTA 按钮在移动设备页面的顶部被点击，因为即使它被隐藏它仍然存在。我发现这是因为我使用的是“z-index: 10”，但如果我删除它，则返回顶部按钮会出现在页面其余内容的下方。

如何确保按钮在隐藏时不会阻挡任何其他内容，或者在您滚动到某个点之前将其从页面中完全删除？这可以用js吗？如果可能的话，我想避免使用 jquery。

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

答案很简单，只需将 pointer-events: none; 添加到您的 css(在隐藏状态)。它将阻止与元素的任何交互，允许您“点击”它。 :)