michaelmcgurk michaelmcgurk - 2 months ago 8
CSS Question

Shrink image on scroll - jQuery

I'd like to shrink my header image size to 50% width/height as soon as I scroll passed the top of it. Preferably it would transition and not be a sudden jump to half the size.

I have put together something below but the transition happens too late. How do I fix this to happen as soon as I pass it?



/*!
* classie - class helper functions
* from bonzo https://github.com/ded/bonzo
*
* 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 */
/*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 );








/**
* cbpAnimatedHeader.min.js v1.0.0
* http://www.codrops.com
*
* Licensed under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
*
* Copyright 2013, Codrops
* http://www.codrops.com
*/
var cbpAnimatedHeader=(function(){var b=document.documentElement,g=document.querySelector(".cbp-af-header"),e=false,a=300;function f(){window.addEventListener("scroll",function(h){if(!e){e=true;setTimeout(d,250)}},false)}function d(){var h=c();if(h>=a){classie.add(g,"cbp-af-header-shrink")}else{classie.remove(g,"cbp-af-header-shrink")}e=false}function c(){return window.pageYOffset||b.scrollTop}f()})();

body {
text-align:center;
padding:0;
margin:0;
}

img {
padding-top:60px
}

.cbp-af-header {
position: fixed;
top: 0;
left: 0;
width: 100%;
background: #f6f6f6;
z-index: 10000;
height: 200px;
overflow: hidden;
-webkit-transition: height 0.3s;
-moz-transition: height 0.3s;
transition: height 0.3s;
}

.cbp-af-header .cbp-af-inner {
width: 90%;
max-width: 69em;
margin: 0 auto;
padding: 0 1.875em;
}

.cbp-af-header h1,
.cbp-af-header nav {
display: inline-block;
position: relative;
}

/* We just have one-lined elements, so we'll center the elements with the line-height set to the height of the header */
.cbp-af-header h1,
.cbp-af-header nav a {
line-height: 200px;
}

.cbp-af-header h1 {
text-transform: uppercase;
color: #333;
letter-spacing: 4px;
font-size: 4em;
margin: 0;
float: left;
}

.cbp-af-header nav {
float: right;
}

.cbp-af-header nav a {
color: #aaa;
font-weight: 700;
margin: 0 0 0 20px;
font-size: 1.4em;
}

.cbp-af-header nav a:hover {
color: #333;
}

/* Transitions and class for reduced height */
.cbp-af-header h1,
.cbp-af-header nav a {
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}

.cbp-af-header.cbp-af-header-shrink {
height: 90px;
}

.cbp-af-header.cbp-af-header-shrink h1,
.cbp-af-header.cbp-af-header-shrink nav a {
line-height: 90px;
}

.cbp-af-header.cbp-af-header-shrink h1 {
font-size: 2em;
}

/* Example Media Queries */
@media screen and (max-width: 55em) {

.cbp-af-header .cbp-af-inner {
width: 100%;
}

.cbp-af-header h1,
.cbp-af-header nav {
display: block;
margin: 0 auto;
text-align: center;
float: none;
}

.cbp-af-header h1,
.cbp-af-header nav a {
line-height: 115px;
}

.cbp-af-header nav a {
margin: 0 10px;
}

.cbp-af-header.cbp-af-header-shrink h1,
.cbp-af-header.cbp-af-header-shrink nav a {
line-height: 45px;
}

.cbp-af-header.cbp-af-header-shrink h1 {
font-size: 2em;
}

.cbp-af-header.cbp-af-header-shrink nav a {
font-size: 1em;
}
}

@media screen and (max-width: 32.25em) {
.cbp-af-header nav a {
font-size: 1em;
}
}

@media screen and (max-width: 24em) {
.cbp-af-header nav a,
.cbp-af-header.cbp-af-header-shrink nav a {
line-height: 1;
}
}

<div class="cbp-af-header">
<div class="cbp-af-inner">
<img src="http://placehold.it/600x200">
</div>
</div>

<p>
test
</p>

<p>
test
</p>

<p>
test
</p>

<p>
test
</p>

<p>
test
</p>

<p>
test
</p>

<p>
test
</p>
<p>
test
</p>

<p>
test
</p>

<p>
test
</p>

<p>
test
</p>

<p>
test
</p>

<p>
test
</p>

<p>
test
</p>

<p>
test
</p>

<p>
test
</p>

<p>
test
</p>

<p>
test
</p>

<p>
test
</p>

<p>
test
</p>

<p>
test
</p>
<p>
test
</p>

<p>
test
</p>

<p>
test
</p>

<p>
test
</p>

<p>
test
</p>

<p>
test
</p>

<p>
test
</p>




Answer

Update your header animation script (cbpAnimatedHeader.min.js) to resize the header at 1px instead of 300.

/**
 * cbpAnimatedHeader.js v1.0.0
 * http://www.codrops.com
 *
 * Licensed under the MIT license.
 * http://www.opensource.org/licenses/mit-license.php
 * 
 * Copyright 2013, Codrops
 * http://www.codrops.com
 */
var cbpAnimatedHeader = (function() {

    var docElem = document.documentElement,
        header = document.querySelector( '.cbp-af-header' ),
        didScroll = false,
        changeHeaderOn = 1; // this is initially set to 300

    function init() {
        scrollPage();
        window.addEventListener( 'scroll', function( event ) {
            if( !didScroll ) {
                didScroll = true;
                setTimeout( scrollPage, 250 );
            }
        }, false );
    }

    function scrollPage() {
        var sy = scrollY();
        if ( sy >= changeHeaderOn ) {
            classie.add( header, 'cbp-af-header-shrink' );
        }
        else {
            classie.remove( header, 'cbp-af-header-shrink' );
        }
        didScroll = false;
    }

    function scrollY() {
        return window.pageYOffset || docElem.scrollTop;
    }

    init();

})();