javascript - HTML - div is not clickable -
i trying create onepager site , not able click header , want on right side not under logo
$(function () { $('a[href*=#]').stop().click(function () { if (location.pathname.replace(/^\//, '') === this.pathname.replace(/^\//, '') && location.hostname === this.hostname) { var ud_hash = this.hash; var ud_ziel = $(this.hash); if (ud_ziel.length) { var ud_abstand_top = ud_ziel.offset().top; $('html,body').animate({ scrolltop: ud_abstand_top }, 1000, function () { window.location.hash = ud_hash; }); return false; } } }); });
body,html { width:100%; height:100%; margin:0; padding:0; } .ud_scroll { width:100%; height:100%; float:right; position:relative; } div#header { position: fixed; left:20px; top: 10px; width: 100%; } { color:black; opacity:0.5; text-decoration:none; text-align:center; vertical-align:top; line-height: 100px; } a:hover { opacity:1; } nav { } nav ul { margin:0; padding:0; font-family: 'roboto slab', serif; }
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>scrumplex - home</title> <link href="http://fonts.googleapis.com/css?family=roboto+slab:300" rel="stylesheet" type="text/css"> <link rel="stylesheet" type="text/css" href="files/style.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="files/scroll.js"></script> </head> <div id="header"> <a href="#"> <img src="files/img/logo.png" alt="scrumplex"> scrumplex </a> <nav> <ul> <a href="#hello">hello!</a> <a href="#whoami">who i?</a> <a href="#dl">downloads</a> <a href="#cc">copyright</a> <a href="#about">about</a> </ul> </nav> </div> <section id="hello" class="ud_scroll"><h2>hi</h2></section> <section id="whoami" class="ud_scroll"><h2>whoami</h2></section> <section id="dl" class="ud_scroll"><h2>dl</h2></section> <section id="cc" class="ud_scroll"><h2>cc</h2></section> <section id="about" class="ud_scroll"><h2>about!</h2></section> </body> </html>
my header not clickable dont know why ps: i'm new css , html
the problem have there <section id="hello">
on links because class .ud_scroll
has height:100%
. instead of clicking links, clicking section. try making smaller, or removing height value.
next time can use 1 of firefox developer features: inspector. can open page, , click ctrl + shift + i, , try click on link. see this:
thats telling section, id hello, class ud_scroll on else. since "hi" inside section, can click , select it, below unclicable.
Comments
Post a Comment