javascript - I want to Show the Hidden Shrunken Header and Not Shrink The Already Visible Header -
http://callmenick.com/post/animated-resizing-header-on-scroll
im using method,... how edit jquery , css give me small version of header @ top of page once hit scroll point top, making disappear when scrolling top, instead of shrinking , growing bigger header in tutorial?
here js way:
<!-- js --> <script src="http://dageniusmarketer.com/wordpress/wp-content/classie.js"></script> <script> function init() { window.addeventlistener('scroll', function(e){ var distancey = window.pageyoffset || document.documentelement.scrolltop, shrinkon = 265, 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> html:
<!--resizable scrolling header--> <header> <div class="container clearfix"> <h1 id="logo"> logo </h1> <nav> <a href="">lorem</a> <a href="">ipsum</a> <a href="">dolor</a> </nav> </div> </header> <!-- /header -->
here's page source example updated paths (seems code trying reproduce...) start copying , pasting index.html file , modifying there:
<!doctype html> <html lang="en"> <head> <!-- title , meta --> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width,initial-scale=1.0" /> <meta name="description" content="" /> <title>header resize on scroll animations</title> <!-- css --> <link href='http://fonts.googleapis.com/css?family=ubuntu:300,400,700,400italic' rel='stylesheet' type='text/css'> <link href='http://fonts.googleapis.com/css?family=oswald:400,300,700' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="http://callmenick.com/_development/resize-header-on-scroll/css/style.css" /> <!-- js --> <script src="http://callmenick.com/_development/resize-header-on-scroll/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"> logo </h1> <nav> <a href="">lorem</a> <a href="">ipsum</a> <a href="">dolor</a> </nav> </div> </header><!-- /header --> <div id="main"> <div id="content"> <section> <div class="container"> <h1>header resize on scroll animations</h1> <p>cupcake ipsum dolor sit amet lollipop. macaroon candy cotton candy bear claw macaroon carrot cake pastry icing dessert. cupcake pastry tart sesame snaps lollipop donut pie. cookie apple pie toffee lemon drops jelly beans cheesecake sweet roll. jelly-o soufflé donut candy canes wafer dragée sweet cheesecake. macaroon caramels pie cookie gummi bears. ice cream jelly-o toffee cookie gingerbread cookie. soufflé fruitcake jelly-o jelly chupa chups jelly beans. dragée marzipan pastry macaroon oat cake muffin soufflé topping liquorice. jelly-o chocolate cake lollipop.</p> <p>sugar plum muffin cookie pastry oat cake icing candy canes chocolate. gummi bears chupa chups fruitcake dessert jelly. muffin cookie ice cream soufflé pastry lollipop gingerbread sweet. unerdwear.com bonbon candy marzipan bonbon gummies chocolate cake gummi bears powder. unerdwear.com tart halvah chocolate cake dragée liquorice. sugar plum chocolate bar pastry liquorice dragée jelly powder. jelly tootsie roll applicake caramels. marzipan candy tootsie roll donut. gummies ice cream macaroon applicake.</p> <p> <a href="http://callmenick.com/post/animated-resizing-header-on-scroll">« go tutorial?</a><br> <a href="http://callmenick.com/">« go tutorials?</a> </p> </div> </section> <section class="color"> <div class="container"> <h1>cupcakes people!</h1> <p>cupcake ipsum dolor sit amet lollipop. macaroon candy cotton candy bear claw macaroon carrot cake pastry icing dessert. cupcake pastry tart sesame snaps lollipop donut pie. cookie apple pie toffee lemon drops jelly beans cheesecake sweet roll. jelly-o soufflé donut candy canes wafer dragée sweet cheesecake. macaroon caramels pie cookie gummi bears. ice cream jelly-o toffee cookie gingerbread cookie. soufflé fruitcake jelly-o jelly chupa chups jelly beans. dragée marzipan pastry macaroon oat cake muffin soufflé topping liquorice. jelly-o chocolate cake lollipop.</p> <p>sugar plum muffin cookie pastry oat cake icing candy canes chocolate. gummi bears chupa chups fruitcake dessert jelly. muffin cookie ice cream soufflé pastry lollipop gingerbread sweet. unerdwear.com bonbon candy marzipan bonbon gummies chocolate cake gummi bears powder. unerdwear.com tart halvah chocolate cake dragée liquorice. sugar plum chocolate bar pastry liquorice dragée jelly powder. jelly tootsie roll applicake caramels. marzipan candy tootsie roll donut. gummies ice cream macaroon applicake.</p> </div> </section> <section> <div class="container"> <h1>chocolate, vanilla, , red velvet</h1> <p>cupcake ipsum dolor sit amet lollipop. macaroon candy cotton candy bear claw macaroon carrot cake pastry icing dessert. cupcake pastry tart sesame snaps lollipop donut pie. cookie apple pie toffee lemon drops jelly beans cheesecake sweet roll. jelly-o soufflé donut candy canes wafer dragée sweet cheesecake. macaroon caramels pie cookie gummi bears. ice cream jelly-o toffee cookie gingerbread cookie. soufflé fruitcake jelly-o jelly chupa chups jelly beans. dragée marzipan pastry macaroon oat cake muffin soufflé topping liquorice. jelly-o chocolate cake lollipop.</p> <p>sugar plum muffin cookie pastry oat cake icing candy canes chocolate. gummi bears chupa chups fruitcake dessert jelly. muffin cookie ice cream soufflé pastry lollipop gingerbread sweet. unerdwear.com bonbon candy marzipan bonbon gummies chocolate cake gummi bears powder. unerdwear.com tart halvah chocolate cake dragée liquorice. sugar plum chocolate bar pastry liquorice dragée jelly powder. jelly tootsie roll applicake caramels. marzipan candy tootsie roll donut. gummies ice cream macaroon applicake.</p> </div> </section> <section class="color"> <div class="container"> <h1>come me!</h1> <p>cupcake ipsum dolor sit amet lollipop. macaroon candy cotton candy bear claw macaroon carrot cake pastry icing dessert. cupcake pastry tart sesame snaps lollipop donut pie. cookie apple pie toffee lemon drops jelly beans cheesecake sweet roll. jelly-o soufflé donut candy canes wafer dragée sweet cheesecake. macaroon caramels pie cookie gummi bears. ice cream jelly-o toffee cookie gingerbread cookie. soufflé fruitcake jelly-o jelly chupa chups jelly beans. dragée marzipan pastry macaroon oat cake muffin soufflé topping liquorice. jelly-o chocolate cake lollipop.</p> <p>sugar plum muffin cookie pastry oat cake icing candy canes chocolate. gummi bears chupa chups fruitcake dessert jelly. muffin cookie ice cream soufflé pastry lollipop gingerbread sweet. unerdwear.com bonbon candy marzipan bonbon gummies chocolate cake gummi bears powder. unerdwear.com tart halvah chocolate cake dragée liquorice. sugar plum chocolate bar pastry liquorice dragée jelly powder. jelly tootsie roll applicake caramels. marzipan candy tootsie roll donut. gummies ice cream macaroon applicake.</p> </div> </section> <section> <div class="container"> <h1>sugar rush, oh my...</h1> <p>cupcake ipsum dolor sit amet lollipop. macaroon candy cotton candy bear claw macaroon carrot cake pastry icing dessert. cupcake pastry tart sesame snaps lollipop donut pie. cookie apple pie toffee lemon drops jelly beans cheesecake sweet roll. jelly-o soufflé donut candy canes wafer dragée sweet cheesecake. macaroon caramels pie cookie gummi bears. ice cream jelly-o toffee cookie gingerbread cookie. soufflé fruitcake jelly-o jelly chupa chups jelly beans. dragée marzipan pastry macaroon oat cake muffin soufflé topping liquorice. jelly-o chocolate cake lollipop.</p> <p>sugar plum muffin cookie pastry oat cake icing candy canes chocolate. gummi bears chupa chups fruitcake dessert jelly. muffin cookie ice cream soufflé pastry lollipop gingerbread sweet. unerdwear.com bonbon candy marzipan bonbon gummies chocolate cake gummi bears powder. unerdwear.com tart halvah chocolate cake dragée liquorice. sugar plum chocolate bar pastry liquorice dragée jelly powder. jelly tootsie roll applicake caramels. marzipan candy tootsie roll donut. gummies ice cream macaroon applicake.</p> </div> </section> </div> </div><!-- #main --> <footer> <div id="info-bar"> <div class="container clearfix"> <span class="all-tutorials"><a href="http://callmenick.com/">← tutorials</a></span> <span class="back-to-tutorial"><a href="http://callmenick.com/post/animated-resizing-header-on-scroll">back tutorial</a></span> </div> </div><!-- /#top-bar --> </footer><!-- /footer --> </div><!-- /#wrapper --> <script type="text/javascript"> var _gaq = _gaq || []; _gaq.push(['_setaccount', 'ua-34160351-1']); _gaq.push(['_trackpageview']); (function() { var ga = document.createelement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getelementsbytagname('script')[0]; s.parentnode.insertbefore(ga, s); })(); </script> <script type="text/javascript" src="//cdn.fusionads.net/fusion.js?zoneid=1332&serve=c6sdp2y&placement=callmenickcom" id="_fusionads_js"></script> <script> var interval = setinterval(function(){ // check when fusionads shows in dom var fusionad = document.getelementbyid("fusionads"); if (fusionad){ // clear interval stop looping clearinterval(interval); // add close ad button var closead = document.createelement("a"); closead.id = "close-fusionad"; closead.innerhtml = "x"; closead.href = "#"; document.body.appendchild(closead); // close ad document.getelementbyid("close-fusionad").addeventlistener("click", function(e) { e.preventdefault(); this.remove(); fusionad.remove(); }); } },100); // check every 100ms </script> </body> </html> to achieve goal of starting large, letting go small , preventing going large again:
- remove
elsestatement followingif (distancey > shrinkon)
.
<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>
Comments
Post a Comment