michaelmcgurk michaelmcgurk - 2 months ago 8
CSS Question

Shrink image on scroll

I am currently building a small site and would like the logo to scale down when I scroll down my page.

Currently the way it works, the header drops in size but the logo remains the same size.

How do I fix this so it scales the image down too?

Demo: https://jsfiddle.net/LhwvLgvj/



/*!
* 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.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();

})();

body {
background:skyblue
}

.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

You should add height:100% to both your img and it's parent. Your code not working because img by default have height of original image file, not of it's cotainer.