javascript - css+js来控制导航栏跟着鼠标滚动，但是有一块区域无法选取，是不是设置的透明视图的大小问题，新手求解
就比如说图1中的facebook图标是iamgebutton控件，但是在如图位置无法点中（无法点中的最边界），要往下拉到如图二的位置才可以点击
css代码:
@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);
, :after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
body {
background: #e74c3c;
padding: 240px 0 100%;
font-weight: 400;
font-family: 'Lato', Arial, sans-serif;}
/ Content style /
section {
width: 90%;
max-width: 46em;
text-align: justify;
padding: 1em 2em 0;
margin: 0 auto;
color: #ecf0f1;
line-height: 1.3;
font-size: 1.8em;}
section p {
opacity: 0.4;}
.scroll {
position: fixed;
top: 50%;
left: 50%;
-webkit-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
letter-spacing: 1px;
font-weight: 700;
font-size: 2em;
line-height: 2;
width: 10em;
text-align: center;
height: 2em;
color: #e74c3c;
background: #fff;
font-style: normal;
text-transform: uppercase;
opacity: 0.8;}
.scroll::after {
display: block;
content: '\2193';
color: #fff;
font-size: 3em;
line-height: 1;}
/ Header styles and animations /
.ha-header {
position:fixed;
top: 0;
left: 0;
width: 100%;
padding: 0;
z-index: 50;
font-family: 'Lato', Arial, sans-serif;
-webkit-transform: translateY(0%);
-moz-transform: translateY(0%);
transform: translateY(0%);
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
transition: all 0.5s;}
.ha-header-perspective {
width: 100%;
height: 35%;
position: relative;
-webkit-perspective: 1100px;
-moz-perspective: 1100px;
perspective: 1100px;
-webkit-perspective-origin: 50% 0;
-moz-perspective-origin: 50% 0;
perspective-origin: 50% 0;}
.ha-header-perspective > p {
background: #fff;
text-align: left;
padding: 0 7%;
height: 80%;
width: 100%;
margin: 0 auto;
position: relative;
text-align: justify;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
transition: all 0.5s;
overflow: hidden;
top: 0px;
left: 0px;}
.ha-header-front {
z-index: 2;
-webkit-transform-origin: 50% 100%;
-moz-transform-origin: 50% 100%;
transform-origin: 50% 100%;}
.ha-header-perspective .ha-header-bottom {
background: #ddd;
-webkit-transform-origin: 50% 0%;
-moz-transform-origin: 50% 0%;
transform-origin: 50% 0%;
z-index: 1;
-webkit-transform: rotateX(-90deg);
-moz-transform: rotateX(-90deg);
transform: rotateX(-90deg);
-webkit-transition: top 0.5s;
-moz-transition: top 0.5s;
transition: top 0.5s;
position: absolute;
top: 0;}
/ Justify inline-block elements (h1 on left side, nav on right) /
.ha-header-perspective > p::after {
content: '';
display: inline-block;
width: 100%;}
/ Text styling /
.ha-header h1,
.ha-header h1::before,
.ha-header h1 span,
.ha-header nav,
.ha-header nav::before {
display: inline-block;
vertical-align: middle;
text-align: left;}
.ha-header h1 {
font-weight: 300;
font-size: 3.2em;
margin: 0;
padding: 0 1em 0 0;
color: #2d383f;
cursor: default;
height: 100%;
z-index: 1;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
transition: all 0.5s;}
.ha-header h1::before,
.ha-header nav::before {
content: '';
height: 100%;}
.ha-header h1::after {
content: '';
width: 100px;
height: 96px;
background: #fff;
position: absolute;
z-index: 100;
top: 0;
left: 0;
cursor: pointer;
box-shadow: inset 0 8px #2d383f, inset 0 16px #fff, inset 0 24px #2d383f, inset 0 32px #fff, inset 0 40px #2d383f, inset 0 48px #fff, inset 0 56px #2d383f;
opacity: 0;
border: 20px solid #fff;
-webkit-transition: opacity 0.5s;
-moz-transition: opacity 0.5s;
transition: opacity 0.5s;}
.ha-header nav {
height: 100%;}
.ha-header nav a {
display: inline-block;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 700;
padding: 0.2em 0.4em;
margin: 0 0.4em 0;
font-size: 0.85em;
cursor: pointer;
color: #e74c3c;
outline: none;
text-decoration: none;}
.ha-header nav a:hover {
color: #bc3c2f;}
.ha-header nav a:last-child {
margin-right: 0;}
.ha-header .ha-header-front nav a:first-child,
.ha-header .ha-header-front nav a:last-child {
border: 2px solid #e74c3c;}
.ha-header .ha-header-front nav a:first-child:hover,
.ha-header .ha-header-front nav a:last-child:hover {
border: 2px solid #bc3c2f;}
/ Inpidual states /
.ha-header-large {
height: 420px;}
.ha-header-small {
height: 220px;}
.ha-header-hide {
height: 220px;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
transform: translateY(-50%);}
.ha-header-show {
height: 220px;
-webkit-transform: translateY(0%);
-moz-transform: translateY(0%);
transform: translateY(0%);}
.ha-header-show .ha-header-bottom {
opacity: 0;
-webkit-transition: top 0.5s, opacity 0s 0.5s;
-moz-transition: top 0.5s, opacity 0s 0.5s;
transition: top 0.5s, opacity 0s 0.5s;
-webkit-transform: rotateX(0deg);
-moz-transform: rotateX(0deg);
transform: rotateX(0deg);
top: 0%;}
.ha-header-subshow {
height: 220px;}
.ha-header-subshow .ha-header-bottom {
-webkit-transition: top 0.5s;
-moz-transition: top 0.5s;
transition: top 0.5s;
-webkit-transform: rotateX(0deg);
-moz-transform: rotateX(0deg);
transform: rotateX(0deg);
top: 50%;}
.ha-header-shrink {
height: 220px;
top: 50px;
padding-left: 50px;
padding-right: 50px;}
.ha-header-shrink .ha-header-bottom {
opacity: 0;}
.ha-header-rotate {
height: 220px;
top: 50px;
padding-left: 50px;
padding-right: 50px;}
.ha-header-rotate .ha-header-front {
-webkit-transform: translateY(-100%) rotateX(90deg);
-moz-transform: translateY(-100%) rotateX(90deg);
transform: translateY(-100%) rotateX(90deg);}
.ha-header-rotate .ha-header-bottom {
top: 50%;
-webkit-transition: -webkit-transform 0.5s;
-moz-transition: -moz-transform 0.5s;
transition: transform 0.5s;
-webkit-transform: rotateX(0deg) translateY(-100%);
-moz-transform: rotateX(0deg) translateY(-100%);
transform: rotateX(0deg) translateY(-100%);}
.ha-header-rotateBack {
height: 220px;
top: 50px;
padding-left: 50px;
padding-right: 50px;}
.ha-header-rotateBack .ha-header-front {
-webkit-transform: translateY(0%) rotateX(0deg);
-moz-transform: translateY(0%) rotateX(0deg);
transform: translateY(0%) rotateX(0deg);}
.ha-header-rotateBack .ha-header-bottom {
top: 50%;
-webkit-transition: -webkit-transform 0.5s;
-moz-transition: -moz-transform 0.5s;
transition: transform 0.5s;
-webkit-transform: rotateX(-90deg);
-moz-transform: rotateX(-90deg);
transform: rotateX(-90deg);}
.ha-header-color {
height: 420px;}
.ha-header-color .ha-header-front,
.ha-header-color .ha-header-bottom {
background: #f3796c;}
.ha-header-color h1,
.ha-header-color nav a {
color: #fff;}
.ha-header-box {
height: 192px;
width: 100px;
top: 20px;
left: 20px;}
.ha-header-box h1 {
padding-left: 150px;}
.ha-header-box h1,
.ha-header-box nav a {
color: transparent;}
.ha-header-box h1:after {
opacity: 1;}
.ha-header-box nav {
opacity: 0;}
.ha-header-fullscreen {
height: 100%;
opacity: 0.9;}
.ha-header-fullscreen .ha-header-front {
height: 100%;}
.ha-header-fullscreen .ha-header-bottom {
opacity: 0;
-webkit-transition: top 0.5s, opacity 0s 0.5s;
-moz-transition: top 0.5s, opacity 0s 0.5s;
transition: top 0.5s, opacity 0s 0.5s;
-webkit-transform: rotateX(0deg);
-moz-transform: rotateX(0deg);
transform: rotateX(0deg);
top: 50%;
background: #f3796c;}
.ha-header-subfullscreen {
height: 100%;
opacity: 0.9;}
.ha-header-subfullscreen .ha-header-bottom {
-webkit-transition: top 0.5s;
-moz-transition: top 0.5s;
transition: top 0.5s;
-webkit-transform: rotateX(0deg);
-moz-transform: rotateX(0deg);
transform: rotateX(0deg);
top: 50%;
background: #f3796c;}
.ha-header-subfullscreen .ha-header-bottom nav a {
color: #fff;}
@media screen and (max-width: 65em) {
body {
font-size: 85%;
}}
@media screen and (max-width: 60em) {
.ha-header-perspective > p,
.ha-header nav {
text-align: center;
}
.ha-header h1 {
padding: 10px 0;
height: 60%;
}
.ha-header .ha-header-bottom nav {
padding: 40px 0px;
}
.ha-header nav {
display: block;
height: auto;
}
}
@media screen and (max-width: 38em) {
section {
font-size: 1.3em;
}
.ha-header h1 {
font-size: 2em;
}
.ha-header nav {
font-size: 60%;
}}
