javascript - Why is my fixed navbar becomes transparent on scroll down? -
i have header, navbar , cover photo. whenever user scrolls down, header becomes hidden , navbar stays @ top, way wanted be. however, when navbar passes cover photo navbar becomes disappears appears when passes content. have set script make navbar fixed on top if user scrolls down. working fine if remove cover photo html code. wrong it?
below code:
<!--header --> <div class="header-page"> <a class="navbar-header" href="#"> <img src="images/logo/logo.png" width="300px" height="150px" /> </a> <a href="" class="navbar-header-text">login</a> | <a href="" class="navbar-header-text">create account</a> </div> <!--navbar --> <div class="menu"> <nav class="navbar navbar-default"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mynavbar"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">logo</a> </div> <div class="collapse navbar-collapse" id="mynavbar"> <ul class="nav navbar-nav"> <li class="active"><a href="#">home</a></li> <li><a href="#">products</a></li> <li><a href="#">about us</a></li> <li><a href="#">contact</a></li> </ul> </div> </div> </nav> </div> <!--cover photo--> <div class="start-page parallax-background" id="home"> <div class="opacity"></div> <div class="content"> <div class="arrow-down"></div> </div> </div> <!--content--> <div class="container"> <p> example sentences</p> </div> this external style sheet.
/* navigation bar */ .menu { position:absolute; width:100%; margin:0; height: 50px; } .navbar { color:red; border:none; border-radius:0; margin-top:0; } .navbar .navbar-nav { display: inline-block; float: none; vertical-align: top; background: white; } .navbar .navbar-collapse { text-align: center; background: white; } .fixed { position:fixed; top:0; } .hide-header { display: none; } /* cover page */ .start-page { position:relative; width:100%; height:500px; background:url(../images/cover/cover3.jpg) 0px 0px fixed; } .opacity { position:absolute; width:100%; height:500px; background:rgba(0,0,0,0.7); } .arrow-down { position: absolute; bottom: 110px; left: 50%; margin-left: -10px; width: 21px; height: 29px; background: url(../images/icons/arrow-down.png) no-repeat center center; display: block; -webkit-animation: bounce-fade 1.2s infinite; /* safari 4+ */ -moz-animation: bounce-fade 1.2s infinite; /* fx 5+ */ -o-animation: bounce-fade 1.2s infinite; /* opera 12+ */ animation: bounce-fade 1.2s infinite; /* ie 10+ */ } @-webkit-keyframes bounce-fade { 0% { opacity: 0; bottom: 70px; } 100% { opacity: 1; bottom: 35px; } } @-moz-keyframes bounce-fade { 0% { opacity: 0; bottom: 70px; } 100% { opacity: 1; bottom: 35px; } } @-o-keyframes bounce-fade { 0% { opacity: 0; bottom:70px; } 100% { opacity: 1; bottom: 35px; } } @keyframes bounce-fade { 0% { opacity: 0; bottom: 70px; } 100% { opacity: 1; bottom: 35px; } } this javascript navbar.
var num = 150; $(window).bind('scroll', function () { if ($(window).scrolltop() > num) { $('.menu').addclass('fixed'); //$('.page-header').addclass('hide-header'); } else { $('.menu').removeclass('fixed'); //$('.page-header').removeclass('hide-header'); } });
add background:white; .fixed class like
.fixed { position:fixed; top:0; left:0; right:0; width:100%; z-index:99; background:white; } i have demo please @ this
$(window).on('scroll', function () { if ($(window).scrolltop() > 150) { $('header').addclass('fixed'); //$('.page-header').addclass('hide-header'); } else { $('header').removeclass('fixed'); //$('.page-header').removeclass('hide-header'); } });body { float: left; width: 100%; padding-bottom: 20px; } .common { width: 100%; float: left; height: 400px; background: #000; margin-top: 30px; } .allbody { float: left; width: 100%; } { display: inline-block; padding: 15px; } header { float: left; width: 100%; position: static; top: 0; left: 0; background: #fff; } .fixed { position: fixed; top: 0; background: #fff; } .common h2 { font-size: 30px; color: #fff; text-align: center; padding-top: 10%; }<header> <a href="#firstdestination" data-anchor="firstdestination">first page</a> <a href="#seconddestination" data-anchor="seconddestination">second page</a> <a href="#thirddestination" data-anchor="thirddestination">third page</a> <a href="#fourthdestination" data-anchor="fourthdestination">fourth page</a> </header> <div class="allbody"> <div class="common" id="firstdestination" ><h2>first page</h2></div> <div class="common" id="seconddestination"><h2>second page</h2></div> <div class="common" id="thirddestination" ><h2>third page</h2></div> <div class="common" id="fourthdestination" ><h2>fourth page</h2></div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
Comments
Post a Comment