我一直在使用 impress.js、html5 和 css。我的 impress.js 演示文稿达到了我非常满意的标准，但我正在尝试实现类似于 Twitter 的固定顶部导航。
当前的实现无法正常工作。如果您在幻灯片/步骤上单击该栏，则链接不可单击。
HTML
<!DOCTYPE html5>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=1024"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<title>PATCHU_</title>
<meta name="author" content="patchu" />
<link href="http://fonts.googleapis.com/css?family=Open+Sans:regular,semibold,italic,italicsemibold|PT+Sans:400,700,400italic,700italic|PT+Serif:400,700,400italic,700italic" rel="stylesheet" />
<link href="css/style.css" rel="stylesheet" />
<link rel="shortcut icon" href="favicon.png" />
<link rel="apple-touch-icon" href="apple-touch-icon.png" />
</head>
<body class="impress-not-supported">
<div class="fallback-message">
<p>Your browser <strong>doesn't support the features required</strong> by my website, so you are presented with a simplified version.</p>
<p>For the best experience please use the latest <strong>Chrome</strong>, <strong>Safari</strong> or <strong>Firefox</strong> browser.</p>
</div>
<div class="navbar-fixed-top2" align="center">
<p>Navigation will go here <a class="" href="#websites" title="My Websites">My Websites</a>
<a class="" href="#about" title="My Websites">About</a>
<a class="" href="#contact" title="My Websites">Contact</a>
<a class="" href="#applications" title="My Websites">Applications</a>
</div>
<div id="impress" data-transition-duration="800">
<div id="title" class="step slide" data-x="0" data-y="0" data-scale="3">
<hgroup>
<h1>@PATCHU_</h1>
<h2></h2>
</hgroup>
</div>
<div id="about" class="step slide" data-x="-1000" data-y="-700" data-rotate="270" data-scale="5">
<h1>About Me</h1>
</div>
<div id="about1" class="step slide about" data-x="-1900" data-y="880" data-z="-100" data-rotate="270" data-scale="1">
<p>Apart from making <strong>awesome websites</strong>, I love computer networking and making <strong>iOS applications.</strong></p>
</div>
<div id="about2" class="step slide about" data-x="-1900" data-y="100" data-z="-100" data-rotate="270" data-scale="1">
<p>Minimalist, <strong>Perfectionist</strong>, Gamer and Apple fanboy. I have a passion for creating stuff. Love trying out <strong>new technologies</strong> and experiences.</p>
</div>
<div id="about3" class="step slide about" data-x="-1900" data-y="-800" data-z="-100" data-rotate="270" data-scale="1">
<p>I mostly code in <strong>PHP</strong> and <strong>Objective-C</strong>, but I'm not afraid to get my hands dirty.</p>
</div>
<div id="about4" class="step slide about" data-x="-1900" data-y="-1600" data-z="-100" data-rotate="270" data-scale="1">
<p><strong>Graduated</strong> with a <strong>1:1</strong> (84% Average) in Computer Network Technology BSc.</p>
</div>
<div id="websites" class="step slide" data-x="7100" data-y="-700" data-z="-3000" data-rotate="0" data-scale="5">
<h1>Websites</h1>
</div>
<div id="applications" class="step slide application" data-x="3950" data-y="-4500" data-z="-3000" data-rotate="90" data-scale="5">
<h1>Applications</h1>
</div>
<div id="contact" class="step slide" data-x="-180" data-y="2100" data-scale="3">
<h1>Connect</h1>
<p></p>
<div id="contact_images">
<a href=""><img src="images/twitter.png"></a>
<a href=""><img src="images/linkedin.png"></a>
</div>
</div>
</div>
<script src="js/impress.js"></script>
<script>
//All hail megatron
impress().init();
//impress().showMenu();
</script>
</body>
</html>
CSS
/*
Resetting the humans
*/
.navbar-fixed-top2{
position:fixed;
top:0;
width:100%;
height:50px;
background-color:red;
z-index:3000;
}
最佳答案
这是由于 impress.js 中的一个 chrome 错误的解决方法，请参阅随附的 CSS 文件末尾的注释。
要使导航栏中的链接可点击，请将以下内容添加到 .navbar-fixed-top2 CSS 类:
pointer-events: auto
或者，将以下类添加到您的 CSS:
.extra-clickable { pointer-events: auto }
...然后将该类添加到#impress 之外的任何您希望可点击的内容。
关于javascript - 带有固定顶部导航的 impress.js 不工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11808018/