时间戳

首页 > 解决方案 > 如何防止隐藏按钮阻止链接被点击

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

问题描述

我正在使用下面的代码添加一个“返回顶部”按钮，该按钮在滚动超过页面上的某个点后出现。问题是这个按钮阻止了我在移动设备页面顶部点击我的 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>

标签： javascripthtmlcss

解决方案

答案就像添加pointer-events: none;到您的 css 一样简单（在隐藏状态下）。它将阻止与元素的任何交互，允许您“点击”它。:)

推荐阅读