JS 在页面各部分之间的转换中不起作用

Question

我的网页有问题 https://www.martanking.eu/ 如果我向下滚动，导航消失并显示箭头以滑动导航。但是，如果我绕过页面的各个部分，则此代码不起作用。无法点击！我的代码与许多 PHP 文件分开。 （提示：您可以将我的页面从捷克语翻译成英语）。

请帮帮我。

我给个JS代码：

$(document).on('click', 'a[href^="#"]', function (event) {
    event.preventDefault();

    $('html, body').animate({
        scrollTop: $($.attr(this, 'href')).offset().top
    }, 800);
});



var nav = document.getElementById("bigNav");
var nav1 = document.getElementById("myDIV");
var nav2 = document.getElementById("myDIV2");
window.onscroll = function() {scrollFunction()};

function scrollFunction() {
  if (document.body.scrollTop > 280 || document.documentElement.scrollTop > 280) {
      nav.style.backgroundColor = "rgba(97, 99, 99, 0.8)";
      nav.style.width = "1%";
      nav.style.left = "0";
      nav.style.top = "0";
      nav1.style.opacity = "0";
      nav2.style.opacity = "0";
      nav.style.opacity = "0";
      document.getElementById("cs").style.visibility = "visible";
      document.getElementById("arrleft").style.visibility = "visible";
      testWi();
  } else {
    nav.style.width = "80%";
    nav.style.lineHeight = "5vw";
    nav.style.left = "10%";
    nav.style.backgroundColor = "transparent";
    nav.style.opacity = "1"
    nav1.style.opacity = "1";
    nav2.style.opacity = "1";
    document.getElementById("cs").style.visibility = "hidden";
    document.getElementById("arrleft").style.visibility = "hidden";
  }
}

var width = (window.innerWidth > 0) ? window.innerWidth : screen.width;




function newElem() {
  var newElem = document.createElement("A");
  newElem.innerHTML = "<i class='fas fa-arrow-alt-circle-right' id='arrleft'></i>";
  newElem.style.fontSize = "15vw";
  newElem.style.color = "white";
  newElem.style.position = "fixed";
  newElem.style.top = "5vw";
  newElem.style.left = "5vw";
  newElem.style.backgroundColor = "gray";
  function hoverNav() {
    nav.style.cursor = "pointer";
    document.getElementById("arrleft").style.transform = "scale(1.2)"; 
    }
}

function loadNav() {
    document.getElementById("arrleft").remove();
    nav.style.width = "96%";
    nav.style.left = "2%";
    nav1.style.width = "70%";
    nav1.style.width = "30%";
    nav1.style.top = "2vw";
    nav2.style.top = "2vw";
    nav1.style.zIndex = "1000";
    nav2.style.zIndex = "1000";
      function hoverNav() {
    nav.style.cursor = "pointer";
    document.getElementById("arrleft").style.transform = "scale(1.2)";
}
}

function hoverNav() {
    nav.style.cursor = "pointer";
    document.getElementById("arrleft").style.transform = "scale(1.2)";
}
function outNav() {
    document.getElementById("arrleft").style.transform = "scale(1)";
    nav.style.cursor = "pointer";
}

function show() {
    document.getElementById("cs").style.visibility = "hidden";
    document.getElementById("arrleft").style.visibility = "hidden";
    nav.style.width = "80%";
    nav.style.lineHeight = "5vw";
    nav.style.left = "10%";
    nav.style.backgroundColor = "rgba(97, 99, 99, 0.8)";
    nav.style.opacity = "1"
    nav1.style.opacity = "1";
    nav2.style.opacity = "1";
}

Answer 1

这是因为您的 DIV's 和 class 'div3' 位于您的按钮前面，带有 show() 函数和 id="cs"。

添加这个 CSS：

#cs {
   z-index: 100;
}