javascript - Getting a navbar to appear on scroll with a white background -
hi guys trying nav bar have white background user scroll down website. reason not sure how white background appear on navbar , mine keeps on disappearing scroll
so navbar appears fine no background @ top of page. need user scroll down page, should stick top of screen white background on
something : example
but have navbar set up, need background appear
<body> <div class="parallax"> <div class ="logo"> <img src="images/logo1.fw.png"> </div> <nav class="navbar navbar-default"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div id="navbar" class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li><a href="#">home</a></li> <li><a href="#">timetable</a></li> <li><a href="#">prices</a></li> <li><a href="#">about us</a></li> <li><a href="#">contact</a></li> <li><a href="#">belt rankings</a></li> <li><a href="#">blog</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">classes </a> <ul class="dropdown-menu"> <li><a href="#">brazilian jiu jitsu</a></li> <li><a href="#">wrestling</a></li> <li><a href="#">boxing</a></li> <li><a href="#">yoga</a></li> <li><a href="#">women self-defence</a></li> <li><a href="#">treatments</a></li> <li><a href="#">kids</a></li> </ul> </li> </ul> </div><!--/.nav-collapse --> </div><!--/.container-fluid --> </nav> <div class="container"> </div> </div> <div class="parallax1"> </div> <!-- jquery (necessary bootstrap's javascript plugins) --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <!-- include compiled plugins (below), or include individual files needed --> <script src="js/bootstrap.js"></script> <script> $(document).ready(function(){ // hide .navbar first $(".navbar").show(); // fade in .navbar $(function () { $(window).scroll(function () { $('.navbar-default').css({ backgroundcolor: $(this).scrolltop() > 100 ? 'white': 'transparent' }) }); }); }); </script> </body> css:
body { font-family: 'open sans', sans-serif, arial; font-size: 16px; color: #6d6d6d; background-color: #f5f5f5; font-weight: 300; } h1,h2,h3,h4,h5,h6 { font-family: 'montserrat', sans-serif, arial; padding-bottom: 5px; color: #373432; line-height: 1em; font-weight: normal; } { text-decoration: none; outline: none; } .parallax { background-image: url("../images/back1.jpg"); min-height: 1000px; background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; width: 100%; } .parallax1 { min-height: 1000px; } .logo { float: left; padding-top: 50px; padding-left: 40px; } .logo h1 { text-transform: uppercase; font-weight: 900; font-size: 60px; letter-spacing: -5px; line-height: 50px; color: white; } .navbar-nav>li>a { line-height: 6px; } .navbar { float: right; padding-top: 50px; padding-right: 60px; font-size: 13px; text-transform: uppercase; } .navbar-default { background-color: transparent; border-top: 0px solid rgba(0, 0, 0, 0.5); border-bottom: 0px solid rgba(0, 0, 0, 0.5); border-left: 0px solid rgba(0, 0, 0, 0.5); border-right: 0px solid rgba(0, 0, 0, 0.5); -webkit-transition: background-color 200ms linear; -moz-transition: background-color 200ms linear; -o-transition: background-color 200ms linear; -ms-transition: background-color 200ms linear; transition: background-color 200ms linear; } .navbar-default .navbar-nav>li>a { color: #ffffff; } .navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus { background-color: #f8bd23; text-decoration: none; color: #ffffff; -webkit-transition: background-color 200ms linear; -moz-transition: background-color 200ms linear; -o-transition: background-color 200ms linear; -ms-transition: background-color 200ms linear; transition: background-color 200ms linear; } .navbar-nav > li{ padding-left:30px; } .container { width:100%; height:100%; display:flex; justify-content:center; flex-direction: column; align-items: center; } thanks again
in principle, need change:
... if ($(this).scrolltop() > 100) { $('.navbar').fadein(); } else { $('.navbar').fadeout(); } ... ... ...
... $('.navbar-default').css({ backgroundcolor: $(this).scrolltop() > 100 ? 'white': 'transparent' }) ... you might want add in transition background-color property of .navbar-default in css, did links:
.navbar-default { -webkit-transition: background-color 200ms linear; -moz-transition: background-color 200ms linear; -o-transition: background-color 200ms linear; -ms-transition: background-color 200ms linear; transition: background-color 200ms linear; } in practice, want wrap inside function called on more scroll event. namely on load , resize events, this:
var checkscrollbar = function(){ $('.navbar-default').css({ backgroundcolor: $(this).scrolltop() > 100 ? 'white' : 'transparent' }) } $(window).on('load resize scroll', checkscrollbar) working example:
var checkscrollbar = function(){ $('.navbar-default').css({ backgroundcolor: $(this).scrolltop() > 100 ? 'white' : 'transparent' }) } $(window).on('load resize scroll', checkscrollbar)body { margin:0 } body > div { background-color: red; } .parallax1 { min-height: 200vh; } /* * css above for so, don't use in project */ nav.navbar-default { background-color: transparent; transition: background-color 200ms linear; }<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <div class="parallax"> <div class="logo"> <img src="images/logo1.fw.png"> </div> <nav class="navbar navbar-default navbar-fixed-top"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div id="navbar" class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li><a href="#">home</a></li> <li><a href="#">timetable</a></li> <li><a href="#">prices</a></li> <li><a href="#">about us</a></li> <li><a href="#">contact</a></li> <li><a href="#">belt rankings</a></li> <li><a href="#">blog</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">classes </a> <ul class="dropdown-menu"> <li><a href="#">brazilian jiu jitsu</a></li> <li><a href="#">wrestling</a></li> <li><a href="#">boxing</a></li> <li><a href="#">yoga</a></li> <li><a href="#">women self-defence</a></li> <li><a href="#">treatments</a></li> <li><a href="#">kids</a></li> </ul> </li> </ul> </div> <!--/.nav-collapse --> </div> <!--/.container-fluid --> </nav> <div class="container"> </div> </div> <div class="parallax1"> </div>
Comments
Post a Comment