javascript - Parallax scrolling and fixed footer code causing width issues -
i bolted bits of code. 1 parallax scrolling, , other piece of fixed footer code found here: http://codepen.io/madshaakansson/pen/cgjch
though after bolting , fixing few issues, have problem different widths. header different width footer, , main content doesnt span whole width of page. have tried adjusting width of content css 100%, made main content span whole width, ended breaking footer.
i not sure need change make these different bits of code work together. advice appreciated.
my attempt: http://codepen.io/dingerzat/pen/qgbwkk
html
/*global define: false */ 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(); (function(window) { 'use strict'; // class helper functions bonzo https://github.com/ded/bonzo function classreg(classname) { return new regexp("(^|\\s+)" + classname + "(\\s+|$)"); } // classlist support class management // altho fair, api sucks because won't accept multiple classes @ once var hasclass, addclass, removeclass; if ('classlist' in document.documentelement) { hasclass = function(elem, c) { return elem.classlist.contains(c); }; addclass = function(elem, c) { elem.classlist.add(c); }; removeclass = function(elem, c) { elem.classlist.remove(c); }; } else { hasclass = function(elem, c) { return classreg(c).test(elem.classname); }; addclass = function(elem, c) { if (!hasclass(elem, c)) { elem.classname = elem.classname + ' ' + c; } }; removeclass = function(elem, c) { elem.classname = elem.classname.replace(classreg(c), ' '); }; } function toggleclass(elem, c) { var fn = hasclass(elem, c) ? removeclass : addclass; fn(elem, c); } var classie = { // full names hasclass: hasclass, addclass: addclass, removeclass: removeclass, toggleclass: toggleclass, // short names has: hasclass, add: addclass, remove: removeclass, toggle: toggleclass }; // transport if (typeof define === 'function' && define.amd) { // amd define(classie); } else { // browser global window.classie = classie; } })(window);html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { background: transparent; border: 0; margin: 0; padding: 0; vertical-align: baseline; } body { line-height: 1; } h1, h2, h3, h4, h5, h6 { clear: both; font-weight: normal; } ol, ul { list-style: none; } blockquote { quotes: none; } blockquote:before, blockquote:after { content: ''; content: none; } del { text-decoration: line-through; } /* tables still need 'cellspacing="0"' in markup */ table { border-collapse: collapse; border-spacing: 0; } img { border: none; } /* =scss variables -------------------------------------------------------------- */ /* =global -------------------------------------------------------------- */ *, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } body { background-color: #3cb5f9; color: #505050; font-family: "ubuntu", sans-serif; font-weight: 300; font-size: 16px; line-height: 1.8; } /* headings */ h1, h2, h3, h4, h5, h6 { line-height: 1; font-weight: 300; } { text-decoration: none; color: #3cb5f9; } a:hover { color: #0793e2; } /* =template -------------------------------------------------------------- */ #wrapper { width: 100%; margin: 0 auto; } #main { background-color: #ffffff; padding-top: 150px; } .container { width: 80%; margin: 0 auto; padding: 0 30px; } section { padding: 60px 0; } section h1 { font-weight: 700; margin-bottom: 10px; } section p { margin-bottom: 30px; } section p:last-child { margin-bottom: 0; } section.color { background-color: #d51c84; color: white; } /* =info bar -------------------------------------------------------------- */ #info-bar { background-color: #000000; } #info-bar { color: white; font-size: 14px; text-transform: uppercase; display: inline-block; margin: 0; padding: 10px; } #info-bar a:hover { background-color: #0793e2; } #info-bar span.all-tutorials, #info-bar span.back-to-tutorial { display: block; width: 50%; } #info-bar span.all-tutorials { float: left; text-align: left; } #info-bar span.back-to-tutorial { float: right; text-align: right; } /* =header -------------------------------------------------------------- */ #logo img { height: 40%; } header { width: 100%; height: 150px; overflow: hidden; position: fixed; top: 0; left: 0; z-index: 999; background-color: #000000; -webkit-transition: height 0.3s; -moz-transition: height 0.3s; -ms-transition: height 0.3s; -o-transition: height 0.3s; transition: height 0.3s; } header h1#logo { display: inline-block; height: 150px; line-height: 150px; float: left; font-family: "oswald", sans-serif; font-size: 60px; color: white; font-weight: 400; -webkit-transition: 0.3s; -moz-transition: 0.3s; -ms-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } header nav { display: inline-block; float: right; } header nav { line-height: 150px; margin-left: 20px; color: #ffffff; font-weight: 700; font-size: 18px; -webkit-transition: 0.3s; -moz-transition: 0.3s; -ms-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } header nav a:hover { color: white; } header.smaller { height: 75px; } header.smaller h1#logo { width: 150px; height: 75px; line-height: 75px; font-size: 30px; } header.smaller nav { line-height: 75px; } /* =footer -------------------------------------------------------------- */ *, *:before, *:after { box-sizing: border-box; color: #242424; padding: 20; margin: 30; } html, body { background: rgb(0, 0, 0); } .content { width: 850px; margin: auto; margin-bottom: 350px; /* same height footer */ padding: 100px 0; } .fixed_footer { width: 100%; height: 350px; background: #000000; position: fixed; left: 0; bottom: 0; z-index: -100; } .fixed_footer p { color: #696969; column-count: 2; column-gap: 50px; font-size: 1em; font-weight: 300; } /* =extras -------------------------------------------------------------- */ .clearfix:after { visibility: hidden; display: block; content: ""; clear: both; height: 0; } /* =media queries -------------------------------------------------------------- */ @media , (max-width: 660px) { /* =header -------------------------------------------------------------- */ header h1#logo { display: block; float: none; margin: 0 auto; height: 100px; line-height: 100px; text-align: center; } header nav { display: block; float: none; height: 50px; text-align: center; margin: 0 auto; } header nav { line-height: 50px; margin: 0 10px; } header.smaller { height: 75px; } header.smaller h1#logo { height: 40px; line-height: 40px; font-size: 30px; } header.smaller nav { height: 35px; } header.smaller nav { line-height: 35px; } } @media , (max-width: 600px) { .container { width: 100%; } #info-bar { display: block; } #info-bar span.all-tutorials, #info-bar span.back-to-tutorial { width: 100%; } #info-bar span.all-tutorials, #info-bar span.back-to-tutorial { float: none; text-align: center; } #info-bar span.all-tutorials { border-bottom: solid 1px #0793e2; } } html, body { margin: 0; height: 100%; } section { position: relative; height: 100%; background-attachment: fixed; background-size: cover !important; background-position: center; background-blend-mode: screen; /* &:nth-of-type(1) */ } section h1 { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 50px; color: #fff; width: 100%; text-align: center; } section:nth-of-type(1) { /* .paralax-1 */ } section:nth-of-type(1) .paralax-1 { height: 100%; width: 100%; position: relative; overflow: hidden; /* .new-paralax */ } section:nth-of-type(1) .paralax-1 .new-paralax { z-index: -100000; transform: translatez(-8000px) scale(0.4); background-attachment: fixed; background-size: cover !important; background-position: center; background-blend-mode: screen; height: 100%; width: 100%; position: relative; transform: scale(1.3); background-color: #ffffff; background-image: url("https://visualhunt.com/photos/xl/2/aerial-view-of-coffee-cup-on-wooden-table.jpg"); } section:nth-of-type(2) { background-image: url("http://www.maximiles.co.uk/images/dynamics/uk/email_images/ftpimages2014/istock_000068237701_full-edited.jpg"); } section:nth-of-type(3) { background-image: url("https://visualhunt.com/photos/xl/2/soup-vegetables-pot-cooking-food-healthy-carrot.jpg"); background-color: red; } section:nth-of-type(4) { background-image: url("https://visualhunt.com/photos/xl/2/sport-gymnastics-frog-funny-fitness-fit-sporty-1.jpg"); }<link href='http://fonts.googleapis.com/css?family=oswald:400,300,700' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/style.css" /> <!-- js --> <body> <div id="wrapper"> <header> <div class="container clearfix"> <h1 id="logo"> <img src="http://www.maximiles.co.uk/images/dynamics/uk/email_images/ftpimages2014/bilendi-logo-trans.png"> </h1> <nav> <a href="">lorem</a> <a href="">ipsum</a> <a href="">dolor</a> </nav> </div> </header> <!-- /header --> <div id="main"> <div id="content"> <main class="content" role="main"> <section> <div class="container"> <h2>services market research</h2> <br> <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://www.callmenick.com/tutorials/create-an-animated-resizing-header-on-scroll">« go tutorial?</a> <br> <a href="http://www.callmenick.com/tutorials">« 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"> <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> </main> </div> </div> <!-- #main --> <footer class="fixed_footer"> <div class="content"> <p>lorem ipsum dolor sit amet, consectetur adipisicing elit. debitis ducimus nemo quo totam neque quis soluta nisi obcaecati aliquam saepe dicta adipisci blanditiis quaerat earum laboriosam accusamus nesciunt! saepe ex maxime enim asperiores nisi. obcaecati nostrum nobis laudantium aliquam commodi veniam magni similique ullam quis pariatur voluptatem harum id error.</p> </div> </footer> </div> <!-- /#wrapper --> </body>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();
<footer class="fixed_footer"> <div class="container content"> <p>lorem ipsum dolor sit amet, consectetur adipisicing elit. debitis ducimus nemo quo totam neque quis soluta nisi obcaecati aliquam saepe dicta adipisci blanditiis quaerat earum laboriosam accusamus nesciunt! saepe ex maxime enim asperiores nisi. obcaecati nostrum nobis laudantium aliquam commodi veniam magni similique ullam quis pariatur voluptatem harum id error.</p> </div> </footer> add container class footer content , give content padding below
.content{padding:100px 30px;}
Comments
Post a Comment