22/06/2016 Development / java script

/** * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/) * http://cssreset.com */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, 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,article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,time, mark, audio, video {    margin: 0;    padding: 0;    border: 0;    font-size: 100%;    font: inherit;    vertical-align: baseline;}/* HTML5 display-role reset for older browsers */article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {    display: block;}body {    line-height: 1;}ol, ul {    list-style: none;}blockquote, q {    quotes: none;}blockquote:before, blockquote:after,q:before, q:after {    content: '';    content: none;}table {    border-collapse: collapse;    border-spacing: 0;}
        
        
        header{
            text-align: center;
            font-size: 72px;
            line-height: 108px;
            height: 108px;
            background: #335C7D;
            color: #fff;
            font-family: 'PT Sans', sans-serif;
            
            // set animation
            -webkit-transition: all 0.4s ease;
            transition: all 0.4s ease;
        }
        
        header.sticky {
            position: fixed;
            font-size: 24px;
            line-height: 48px;
            height: 48px; 
            width: 100%;
            background: #efc47D;
            text-align: left;
            padding-left: 20px;
        }


 

 



     

Sticky Header


      
     
     Big Image
      
     
     
      
     
     
     $(window).scroll(function() {
     if ($(this).scrollTop() > 1){
     $('header').addClass("sticky");
     }
     else{
     $('header').removeClass("sticky");
     }
     });

Outras referencias

http://jsfiddle.net/sinky/S8Fnq/

http://callmenick.com/_development/resize-header-on-scroll/

http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_scrollspy_affix&stacked=h

https://codepen.io/chrissp26/pen/gBrdo

https://codepen.io/renby/pen/tKnFH