我似乎无法在视差图像之后立即定位导航栏。在图像之后出现不必要的空白区域

时间:2017-06-17 05:10:09

标签: javascript html css twitter-bootstrap parallax

直到我上周检查它才能正常工作。我甚至没有改变代码。请访问此网站链接,并帮助我在视差图像后定位NAVBAR。www.abhisaran.tk

请查看   Image以便您可以了解我的问题。 谢谢。

这是视差和资产净值栏的HTML片段:

<div class="wrapper" id="wrapper">
    <header>
        <div class="banner row" id="banner">
            <div class="parallax text-center" style="background-image: url(img/1.jpg);">
                <div class="parallax-pattern-overlay">
                    <div class="container text-center" style="height:600px;padding-top:170px;">
                        <a href="#"><img id="site-title" class=" wow fadeInDown" wow-data-delay="0.0s" wow-data-duration="0.9s" src="img/2.png" alt="" /></a>
                        <h2 class="intro"><a id="neon" href="index.html">Hola   !</a></h2>
                    </div>
                </div>
            </div>
        </div>
        <div class="menu">
            <div class="navbar-wrapper stuckMenu"  style="position:relative;" >
                <div class="container">
                    <div class="navwrapper">
                        <div class="navbar navbar-inverse navbar-static-top">
                            <div class="container">
                                <div class="navArea">
                                    <div class="navbar-collapse collapse">
                                        <ul class="nav navbar-nav">
                                            <li class="menuItem active"><a href="#wrapper">Home</a></li>
                                            <li class="menuItem"><a href="#aboutus">About Me</a></li>
                                            <li class="menuItem"><a href="#specialties">Portfolio</a></li>
                                            <li class="menuItem"><a href="#gallery">Skills</a></li>
                                            <li class="menuItem"><a href="#feedback">Education</a></li>
                                            <li class="menuItem"><a href="#contact">Contact</a></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </header>

这是CSS代码段:

&#13;
&#13;
/* --- Menu --- */
.isFixed {
	left:0px;
	width:100%;
}
.menu {
	margin-top:0px;
	position:absolute;
	z-index:999;
	left:0px;
	right:0px;
	bottom:0;
}

.navArea {
	/*float:right;*/
}
.navwrapper .container {
	padding:0;
	width:auto;
}
.navbar-header {
	display:none;
}
.nav>li>a {
	display:inline-block;
}
.navbar-nav>li {
	float:none;
	display:inline-block;
}
.navbar-nav {
	margin:0 auto;
	text-align:center;
	float:none;
}
.navbar-toggle {
	margin-top: 14px;
}
/* Special class on .container surrounding .navbar,used for positioning it into place. */
.navbar-wrapper {
	margin-top:0px;
	height:80px;/* changed from 80%*/
	position:relative;
	z-index:15;
	margin-right:-15px;
}
.navbar-wrapper .container {
	padding:0px;
}
.navbar-collapse {
	padding:0;
}
.navbar-collapse.in {
	max-height:100%;
}
.navbar.navbar-inverse.navbar-static-top {
	margin:0px auto;/*changed from 0 auto*/
	background:none;
	color:#92DD03;
	border:none;
	font-family:'Open Sans',sans-serif;
	font-size:14px;
	font-weight:600;
	text-transform:uppercase;
}
.navbar.navbar-inverse.navbar-static-top a {
	color:#fff;
	padding:31px 16px;
	line-height:18px;/* CHANGED FROM 18PX */
	text-align:center;
}
.navbar.navbar-inverse.navbar-static-top a:hover {
	background:none;
	color:#fff;
}
.navbar-inverse .navbar-nav>.active>a,.navbar-inverse .navbar-nav>.active>a:focus {
	background:none;
	color:#fff !important;
}
.navbar-inverse .navbar-nav>.active>a:hover {
	color:#fff;
}
.hideClass {
	display:none;
}
.isFixed .navbar-inverse .navbar-nav>.active>a,.isFixed .navbar-inverse .navbar-nav>.active>a:focus {
	background:#92DD03 ;
	color:#fff;
}
.isFixed .navbar.navbar-inverse.navbar-static-top a:hover {
	background:#92DD03 ;
	color:#fff;
}
.isFixed .navbar.navbar-inverse.navbar-static-top a {
	color:#fff;
}
.stuckMenu {
	-o-transition:all .5s;
	-ms-transition:all .5s;
	-moz-transition:all .5s;
	-webkit-transition:all .5s;
	transition:all .5s;
		background:#111;
}
.isFixed {
	background:#333;
		-o-transition:all .5s;
	-ms-transition:all .5s;
	-moz-transition:all .5s;
	-webkit-transition:all .5s;
	transition: all .5s;
}
.collapse {
	display: block !important;
}
@media (max-width: 655px) {
	.collapse {background: #333;}
	.navbar.navbar-inverse.navbar-static-top a {padding: 15px 16px;line-height: 15px;font-size: 13px;}
}
/* --- Parallax --- */
.parallax {
	text-align:center;
	background-position:center center;
	background-repeat:no-repeat;
	background-size:cover;
	background-attachment:fixed !important;
	overflow:hidden;
}
.parallax-pattern-overlay {
	background-image:url(../img/pattern.png);
	background-repeat: repeat;
}
&#13;
&#13;
&#13;

0 个答案:

没有答案