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（处于隐藏状态）一样简单。它将阻止与元素的任何交互，从而允许您“单击”它。：）

Answer 2

我修改了CSS结构。

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>

如何防止隐藏的按钮阻止链接被单击

2 个答案: