javascript - Sticky.js appears to not work -
i trying sticky.js work on web page... on navbar - , unfortunately not work! have tried 2 different plugins, neither seem work!
for not know, thought behind plugin it's supposed make html element 'stuck' screen once scroll down... i've been inspired codeanywhere.com navigation menu, , want similar!
would mind taking @ website page , troubleshooting why my current (same sticky.js link above) sticky plugin not work?
i absolutely novice when comes javascript. appreciated.
try below code...
changes:
1) included jquery cdn in head section
2) included revised style in head (alter per requirements)
3) revised javascript @ end.
<!doctype html> <html> <head> <title>home ~ pixel crescent</title> <base href="http://pixelcrescent.com/" /> <meta charset="utf-8"> <meta content="width=device-width, initial-scale=1.0" name="viewport"> <link href="assets/templates/css/kube.css" rel="stylesheet"> <link href="assets/templates/css/styles.css" rel="stylesheet"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <style> .stick-nav-left { position:fixed; top:0px; z-index:99; } .stick-nav-right { position:fixed; top:0px; right:0px; z-index:99; } </style> </head> <body> <div style="background: white;"> <div class="units-row wide-pic"> <div class="units-row"> <div id="header" class="unit-80 unit-centered"> <nav class="navbar navbar-left" id="navbar-left"> <ul> <li><a class="btn-space" href="http://pixelcrescent.com">home</a></li> <li><a class="btn-space" href="http://pixelcrescent.com/products">products</a></li> <li><a class="btn-space" href="http://pixelcrescent.com/docs">documentation</a></li> </ul> </nav> <nav class="navbar navbar-right" id="navbar-right"> <ul> <li><a class="btn-space" href="#">sign up</a></li> <li><a class="btn btn-blue" href="#">sign in</a></li> </ul> </nav> </div> </div> <div class="units-row" style="margin-top: 150px"> <div class="unit-60 unit-centered" id="logotext"> <h1> pixel crescent </h1> </div> </div> </div> <div style="text-align: center;" class="units-row upper-shadow"> <div class="unit-centered unit-90"> <hgroup> <h1> home </h1> <h1 class="subheading"> make impact. </h1> </hgroup> <p class="lead"> of our products developed usability , satisfaction in mind. don't settle substandard work; build satisfaction, gain loyalty, , increase communication customers through our services. </p> </div> </div> <div class="units-row end"> <div class="unit-90 unit-centered"> <h1>high quality products @ low budget prices</h1> <p>are looking ways cut down on development time, increase productivity , keep clients happy?<br /> we've got covered!</p> <div class="units-row"> <div class="unit-33 shadow-box"> <hgroup> <h2> aligned </h2> <h2 class="subheading"> "under construction" page </h2> </hgroup> <p> <b>features</b><br> no-database 'email subscribe' form<br> logo<br> responsive<br> multi-colors<br> </p> <hr> <strong>get for</strong> <h4> $0 </h4> <a href="#" class="btn btn-blue"> download now! </a> <a href="docs/aligned/" class="btn"> documentation </a> </div> <div class="unit-33 shadow-box"> <hgroup> <h2> managemeat </h2> <h2 class="subheading"> account management system </h2> </hgroup> <p> <b>features</b><br> admin panel<br> mysql database<br> customizeable account info<br> built security<br> </p> <hr> <strong>get for</strong> <h4> $5 </h4> <a href="#" class="btn btn-blue"> purchase </a> <a href="#" class="btn"> documentation </a> </div> <div class="unit-33 shadow-box"> <hgroup> <h2> order website </h2> <h2 class="subheading"> professionally designed & affordable. </h2> </hgroup> <p> <b>features</b><br> fit every budget<br> custom design<br> self customizable<br> installation of other software upon request<br> </p> <hr> <strong>price</strong> <h4> catered need </h4> <a href="#" class="btn btn-blue"> free quote </a> <a href="#" class="btn"> why pixel crescent? </a> /div> </div> </div> </div> </div> <!--- footer ---> <footer> <div> <h5> copyright pixel crescent © 2013-2014 </h5> </div> </footer> <script> $(document).ready(function() { var nav_lft = $("#navbar-left"); var pos1 = nav_lft.position(); var nav_rgt = $("#navbar-right"); var pos2 = nav_rgt.position(); $(window).scroll(function() { var windowpos = $(window).scrolltop(); //-----left navbar if (windowpos >= pos1.top) nav_lft.addclass("stick-nav-left"); else nav_lft.removeclass("stick-nav-left"); //-----right navbar if (windowpos >= pos2.top) nav_rgt.addclass("stick-nav-right"); else nav_rgt.removeclass("stick-nav-right"); }); }); </script> </body> </html>
Comments
Post a Comment