here code re size header on scroll on not working.the didn't set header fixed size.but header size isn't changing used javscript , css isn't can please me rid of error.i struct @ please can me. in advance
<!doctype html> <html lang="en"> <head> <title>request requirment</title> <link rel="stylesheet" href="css/style.css" /> <script src="js/classie.js"> </script> <script> function init() { window.addeventlistener('scroll', function(e){ var distancey = window.pageyoffset || document.documentelement.scrolltop, shrinkon = 300, header = document.queryselector("header"); if (distancey > shrinkon) { classie.add(header,"smaller"); } else { if (classie.has(header,"smaller")) { classie.remove(header,"smaller"); } } }); } window.onload = init(); </script> </head> <body> <div id="wrapper"> <header> <div class="container clearfix"> <h1 id="logo"> site </h1> <nav> <a href="">services</a> <a href="">about us</a> <a href="">contact us</a> </nav> </div> </header> <div id="main"> <div id="content"> <section> <div class="container"> <h1>request requirement</h1> <p>building website time consuming process.but not professional website contsct us</p> <p>we provide best web sites less cost , within time.</p> <p> <a href="http://www.facebook.com/vinod.dirishala">follow on fb</a><br> <a href="http://www.twitter.com/vinod.dirishala">follows on twitter</a> </p> </div> </section> <section class="color"> <div class="container"> <h1>why site!</h1> <p>we provide best quality webstes</p> <p>low cost</p> <p> how contact us</p> </div> </section> </div> </div> <footer> <div id="info-bar"> <div class="container clearfix"> <span class="all-tutorials"> </div> </div> </footer> </div> </body> </html>
check fiddle : https://jsfiddle.net/b39gx6pa/2/
replace javascript this:
function init() { window.addeventlistener('scroll', function(e){ var distancey = window.pageyoffset || document.documentelement.scrolltop,shrinkon = 300,header = document.queryselector("header"); if (distancey > header.clientheight/3) { classie.add(header,"smaller"); }else { if (classie.has(header,"smaller")) { classie.remove(header,"smaller"); } } }); } window.onload = init(); 
Comments
Post a Comment