"Resize & Fixed Header (shrinking header)"
Bootstrap 3.3.0 Snippet by andrewbsc

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <script> function init() { window.addEventListener('scroll', function(e){ var distanceY = window.pageYOffset || document.documentElement.scrollTop, shrinkOn = 100, 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"> IM klik 2017 Rules & Regulations </h1> </div> </header><!-- /header --> <div id="main"> <div id="content"> <section class="color"> <div class="container"> <h1>Terms & Conditions</h1> <p> The I.M. klik 2017 Photo Marathon (Event) is an event organised by Iskandar Investment Berhad (IIB) to be held on 2nd December 2017 at EduCity Sports Complex and is open to all persons of any age and nationality. Employees (including their immediate families) of IIB and its respective divisions, affiliates, authorised dealers/distributors, agents, sub-contractors and persons involved in organising, promoting and/or conducting the Event are not eligible to participate.<br> <br> IIB reserves the right, in its sole discretion, to change the Event date, time, venue or cancel the Event at any time without notice. In the event of such change or cancellation, IIB shall use reasonable efforts to inform the participant prior to the date of the Event.<br> <br> Participants must abide by these Terms and Conditions, Competition Rules, and by any decisions made by IIB.<br> <br> Each participant acknowledges, represents and warrants that the submitted entry is the original work created solely by the participant, that participant is the owner of all intellectual property rights in the submission and all photos and information (Materials) submitted are true and accurate and do not infringe any copyright, trademark, intellectual property rights, moral rights, rights of privacy or publicity of third party and that the participant has the full and unrestricted right to provide the Materials to IIB for its collection, use and disclosure in accordance with these Terms and Conditions and has obtained the consent of third parties where required.<br> <br> Each participant consents to the use and disclosure of any Materials and participant's name, personal data, likeness, photographs, video/film recording, voice/sound recording and other information relating to such participant or that of a third party provided by such participant for any purposes relating to or in connection with the organisation, implementation and record of the Event for any advertising, promotional and publicity activities of IIB in any manner IIB deems fit and waives all claims for compensation or further approval in this respect. Such disclosure may be to any party including IIB’s agencies, affiliated companies, authorised partners and sub-contractors and such other parties as may be permitted or required by law.<br> <br> Each participant grants an unrestricted, royalty free, irrevocable, perpetual and fully sub-licensable license to copy, reproduce, use, display, modify, transmit, distribute and create derivative works of the entries in any media now or hereafter known including but not limited to magazines, websites, social media, at IIB's sole and absolute discretion waives all claims for compensation or further approval in this respect.<br> <br> Each participant agrees to release, discharge, indemnify and hold harmless IIB and its agencies, affiliated companies, authorised partners, sub-contractors and their respective officers, directors, employees, agents from and against any claims, losses, liabilities, expenses, costs and damages arising from and in connection with participant's participation in this Event and the acceptance and use of the prize(s). IIB makes no warranties, representations or guarantee either expressed or implied regarding any prize including but not limited to any warranty of merchantability and fitness for a particular purpose.<br> <br> Each winner shall, when required by IIB:<br> a. attend any prize presentation and participate in any advertising, promotional and publicity activities relating to or in connection with the Event; and/or<br> b. provide his/her original government issued Identity Card / Passport for verification purposes.<br> <br><br> All information submitted by each participant shall be made in full and frank disclosure. Any misrepresentation may result in disqualification from the Event, forfeiture or withdrawal of any prize won in IIB's sole discretion.<br> <br> Any participant who breaches any of these Terms and Conditions and Competition Rules shall be disqualified from the Event and/or have the prize forfeited as determined by IIB at its sole and absolute discretion.<br> <br> IIB shall not be liable in any way to any person for any claims, loss or damage arising from or in connection with the Event and the acceptance and use of the prize, howsoever caused (including without limitation any error in the allocation of chances, breakdown or malfunction in any online transmissions, computer system or equipment, any misdirected or lost notice and any act or omission by any person). IIB shall have the sole and absolute discretion to decide on all matters relating to or in connection with the Event and such decision(s) shall be final and binding on all participants. IIB shall not be obliged to enter into any correspondence with any participant on any matter concerning the Event.<br> <br> IIB may at any time, at its sole and absolute discretion, vary any of these Terms and Conditions without prior notice and without furnishing any reason.<br> <br> Decisions by IIB and competition judges are final. No queries will be entertained.<br> By participating in the Event, the participant is deemed to have read and accepted these terms and conditions.<br> <br> In the event of any inconsistency between the Terms and Conditions and any advertising, promotional, publicity and other material relating to or in connection with the Event, these Terms and Conditions shall prevail.<br> </p> </div> </section> <section> <div class="container"> <h1>Competition Rules</h1> <p> 1.Participants can use any digital camera (including handphones) during the I.M. klik 2017 Photo Marathon.<br> 2.All photographs submitted MUST be in JPEG format and the maximum allowed file size is 15MB.<br> 3.Participants are required to shoot photos that reflect the themes of:<br> a.Adrenaline<br> b.Celebration<br> 4.Participants can submit up to FIVE pictures deemed suitable for each theme before the assigned deadline.<br> 5.Storage format accepted are CF and SD formats. Participants using other formats must supply their own relevant adaptors / drives for use during the submission of entries during the Event. IIB will not be held responsible for the inability to read / download images.<br> 6.All photographs will be judged based on the following criteria:<br>     a.Relevance to theme<br>     b.Creativity in theme interpretation<br>     c.Composition of photograph<br> 7.All submissions must be completed before the announced allocated deadline. IIB reserves the rights to reject any submission once the deadline has lapsed.<br> 8.All submitted photographs must be taken on the day of the Event on 2nd December 2017.<br> 9.Submitted photographs must not be altered by any editing software; only in-camera editing is allowed.<br> 10.Participants must submit their entries personally. No proxy submission by any participant shall be allowed during the Event.<br> 11.IIB will not be responsible for providing photographic equipment including camera, spare batteries, lenses or additional memory cards. All participants are expected to come prepared with all their photographic equipment.<br></p> </div> </section> <!-- 3rd Section --> <section class="color"> <div class="container"> <h1>Important Tips</h1> <p> 1.   Prepare well. Carry fully charged and spare batteries, additional memory cards and a sturdy bag for your digital camera gear. Please note that no charging facilities will be provided. <br> 2.   Be creative in interpreting the themes. <br> 3.   Return early so that you have time to select and download your best pictures <br> 4.   Pre-select your best image so that you can download quickly. <br> 5.   Do not trespass into private property. <br> 6.   Do not litter or smoke within the competition venues premises. <br> 7.   Do not be a nuisance in public, and do not break the law under any circumstances. <br> 8.   Do not park your vehicles illegally. Use the available parking lots provided in the centre, parking lots on public roads. <br> 9.   Do not monopolize the downloading stations. </p> </div> </section> <!-- 3rd Section Ends --> </div> </div><!-- #main --> <footer> <div id="info-bar"> <div class="container clearfix"> </div> </div><!-- /#top-bar --> </footer><!-- /footer --> </div><!-- /#wrapper -->
/* =Reset default browser CSS. Based on work by Eric Meyer: http://meyerweb.com/eric/tools/css/reset/index.html -------------------------------------------------------------- */ 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 the markup */ table { border-collapse: collapse; border-spacing: 0; } a 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; } a { text-decoration: none; color: #3cb5f9; } a:hover { color: #0793e2; } /* =Template -------------------------------------------------------------- */ #wrapper { width: 100%; margin: 0 auto; } #main { background-color: #fff; 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: #3cb5f9; color: white; } /* =Info Bar -------------------------------------------------------------- */ #info-bar { background-color: #3cb5f9; } #info-bar a { 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 -------------------------------------------------------------- */ header { width: 100%; height: 150px; overflow: hidden; position: fixed; top: 0; left: 0; z-index: 999; background-color: #0683c9; -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: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } header nav { display: inline-block; float: right; } header nav a { line-height: 150px; margin-left: 20px; color: #9fdbfc; font-weight: 700; font-size: 18px; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 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 a { line-height: 75px; } /* =Footer -------------------------------------------------------------- */ /* =Extras -------------------------------------------------------------- */ .clearfix:after { visibility: hidden; display: block; content: ""; clear: both; height: 0; } /* =Media Queries -------------------------------------------------------------- */ @media all and (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 a { 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 a { line-height: 35px; } } @media all and (max-width: 600px) { .container { width: 100%; } #info-bar a { 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; } }
/*! * classie v1.0.0 * class helper functions * from bonzo https://github.com/ded/bonzo * MIT license * * classie.has( elem, 'my-class' ) -> true/false * classie.add( elem, 'my-new-class' ) * classie.remove( elem, 'my-unwanted-class' ) * classie.toggle( elem, 'my-class' ) */ /*jshint browser: true, strict: true, undef: true, unused: true */ /*global define: false */ ( function( window ) { 'use strict'; // class helper functions from bonzo https://github.com/ded/bonzo function classReg( className ) { return new RegExp("(^|\\s+)" + className + "(\\s+|$)"); } // classList support for class management // altho to be fair, the api sucks because it won't accept multiple classes at 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 );

Related: See More


Questions / Comments: