Question

我一直在使用impress.js，html5和css。我有一个标准的impress.js演示文稿，我很满意，但我正在尝试实现类似于Twitters的固定顶级导航。

当前的实现无法正常运行。如果您在幻灯片/步骤上单击该栏，则链接将无法点击。

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;
}

Answer 1

这是因为impress.js中的chrome bug的解决方法，请参阅随附的CSS文件末尾的注释。

要使导航栏中的链接可单击，请将以下内容添加到.navbar-fixed-top2 CSS类中：

pointer-events: auto

或者，将以下类添加到CSS中：

.extra-clickable { pointer-events: auto }

...然后将该类添加到#impress之外的任何你想要点击的内容。

impress.js固定顶部导航无法正常工作

1 个答案: