jquery - How do you make a nav bar "sticky"? -
i'm making site friend , make nav bar sticky. here's example: http://www.w3schools.com/html/default.asp. have picture header in example.
here code have made:
<html> <head class="masthead"> <link href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/shift.css" rel="stylesheet"> <link rel="stylesheet" href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/bootstrap.css"> <link rel="stylesheet" href="stylehom.css"> <link href="https://dub110.afx.ms/att/getinline.aspx?messageid=1f91e2e4-f236-11e4-9965-002264c20aa4&attindex=0&cp=-1&attdepth=0&imgsrc=cid%3apart1.04010900.00040603%40btinternet.com&cid=07bd617fb040a20e&hm__login=edwinshepherd1&hm__domain=live.co.uk&ip=10.211.20.8&d=d97&mf=0&hm__ts=mon%2c%2004%20may%202015%2016%3a39%3a02%20gmt&st=edwinshepherd1%25live.co.uk%407&hm__ha=01_9ec1f64927212e04419eae777113f0da6f91696bf6888f10c6ec81157beef631&oneredir=1" rel="shortcut icon" type="image/x-icon" /> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> <style> .jumbotron { background-image:url('//c1.staticflickr.com/9/8723/16322346204_6a1a86440a_c.jpg'); height: 500px; background-repeat: no-repeat; background-size: cover; background-attachment: fixed; } .jumbotron .container { position: relative; top:125px; left:25px; } .jumbotron h1 { color: #fff; font-size: 48px; font-family: 'shift', sans-serif; font-weight: bold; } .jumbotron p { font-size: 20px; color: #fff; } .nav { color: #5a5a5a; font-size: 11px; font-weight: bold; padding: 14px 10px; text-transform: uppercase; } ul { list-style-type: none; margin: 0; padding: 0; } li { display: inline; } .learn-more { background-color: #ffffff; } .learn-more h3 { font-family: 'shift', sans-serif; font-size: 18px; font-weight: bold; } .learn-more { color: #00b0ff; } .neighborhood-guides { background-color: #efefef; border-bottom: 1px solid#dbdbdb } .neighborhood-guides h2 { color: #393c3d; font-size: 24px; } .neighborhood-guides p { font-size: 15px; margin-bottom: 13px; } function resizeiframe(iframeid) { var iframe = window.parent.document.getelementbyid(iframeid); var container = document.getelementbyid('content'); iframe.style.height = container.offsetheight + 'px'; } .blog ,iframe { overflow:hidden; } </style> <style type="text/css"></style><style type="text/css"></style><style type="text/css"></style> <title>the unthinkable</title> </head> <body> <!---<nav class="navbar navbar-default navbar-fixed-top"> <div class="nav"> <div class="container"> <ul class="pull-left"> <li><a href="#"><img src="//c1.staticflickr.com/9/8612/16254026843_667c68f054_n.jpg" alt="logo" style="width:120px;height:30px;border:0"></a></li> <li><a href="browse.html">about</a></li> </ul> <ul class="pull-right"> <a href="#blog">blog</a> <li><a href="http://theunthinkable.tk/alpha/music.html">music</a></li> <li><a href="#">gallery</a></li> </ul> </div> </div> </nav>---!> <div class="jumbotron"> <div class="container"> <h1>my name joe. make music.</h1> <p>this begins.</p> <a href="#blog">learn more</a> </div> </div> <nav class="navbar navbar-default"> <div class="nav"> <div class="container"> <ul class="pull-left"> <li><a href="#"><img src="//c1.staticflickr.com/9/8612/16254026843_667c68f054_n.jpg" alt="logo" style="width:120px;height:30px;border:0"></a></li> <li><a href="browse.html">about</a></li> </ul> <ul class="pull-right"> <a href="#blog">blog</a> <li><a href="http://theunthinkable.tk/alpha/music.html">music</a></li> <li><a href="#">gallery</a></li> </ul> </div> </div> </nav> <div class="neighborhood-guides"> <div class="container"> <h2>what this?</h2> <p>this website home music project: unthinkable.</p> <div class="row"> <div class="col-md-4"> <div class="thumbnail"> <iframe width="100%" height="225" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3a//api.soundcloud.com/playlists/77100370&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&visual=true"></iframe> </div> </div> <div class="col-md-4"> <div class="thumbnail"> <iframe width="100%" height="225" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3a//api.soundcloud.com/tracks/188923984&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&visual=true"></iframe> </div> </div> <div class="col-md-4"> <div class="thumbnail"> <iframe width="100%" height="225" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3a//api.soundcloud.com/tracks/187159699&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&visual=true"></iframe> </div> </div> </div> </div> <a name="blog"></a> <div class="blog"> <iframe src="http://theunthinkable-blog.tk/wordpress/" frameborder="0" width="100%" height="300%" marginheight="0" marginwidth="0" scrolling="no"></iframe> </div> <div class="learn-more"> <div class="container"> <div class="row"> <div class="col-md-4"> <h3>edwin's webspace</h3> <p>ever wanted own place on web; don't know how?</p> <p><a href="#">learn more edwin's webspace</a></p> </div> <div class="col-md-4"> <h3>dot tk</h3> <p>the company gave domain name.</p> <p><a href="http://www.freenom.com/en/index.html">learn dot tk</a></p> </div> <div class="col-md-4"> <h3>hostinger</h3> <p>the company hosts site 24/7!</p> <p><a href="http://www.hostinger.co.uk/">learn more hostinger</a></p> </div> </div> </div> </div> </div> <!-- go www.addthis.com/dashboard customize tools --> <script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-5573204519348e87" async="async"></script> <!-- go www.addthis.com/dashboard customize tools --> <script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-5573204519348e87" async="async"></script> </body> this can viewed @ http://www.theunthinkable.tk:
i prefer if solution html or css have never used jquery before. if way please give me instructions set-up of it.
thanks helps :d
also possible rid of white boarders around nav bar?
you use css stick top header { width: 100% height: /whatever want/ position: fixed top: 0 }
if want create cool effect nav covers title on scroll need use javascript. i'll comment make easier use
//.onscroll() built in method browser (window) //it fires ...wait it.... onscroll window.onscroll = function () { // adjust 0 trigger effect @ right point if (!docked && (menu.offsettop - scrolltop() < 0)) { menu.style.top = 0; menu.style.position = 'fixed'; menu.classname = 'docked'; docked = true; } else if (docked && scrolltop() <= init) { menu.style.position = 'absolute'; menu.style.top = init + 'px'; menu.classname = menu.classname.replace('docked', ''); docked = false; } };
Comments
Post a Comment