0
Ich baue gerade eine kleine Seite und möchte, dass das Logo verkleinert wird, wenn ich meine Seite herunterscrolle.Bild verkleinern auf Bildlauf
Momentan funktioniert die Kopfzeile, aber das Logo bleibt gleich groß.
Wie behebe ich das, so skaliert es auch das Bild?
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 {
\t position: fixed;
\t top: 0;
\t left: 0;
\t width: 100%;
\t background: #f6f6f6;
\t z-index: 10000;
\t height: 200px;
\t overflow: hidden;
\t -webkit-transition: height 0.3s;
\t -moz-transition: height 0.3s;
\t transition: height 0.3s;
}
.cbp-af-header .cbp-af-inner {
\t width: 90%;
\t max-width: 69em;
\t margin: 0 auto;
\t padding: 0 1.875em;
}
.cbp-af-header h1,
.cbp-af-header nav {
\t display: inline-block;
\t 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 {
\t line-height: 200px;
}
.cbp-af-header h1 {
\t text-transform: uppercase;
\t color: #333;
\t letter-spacing: 4px;
\t font-size: 4em;
\t margin: 0;
\t float: left;
}
.cbp-af-header nav {
\t float: right;
}
.cbp-af-header nav a {
\t color: #aaa;
\t font-weight: 700;
\t margin: 0 0 0 20px;
\t font-size: 1.4em;
}
.cbp-af-header nav a:hover {
\t color: #333;
}
/* Transitions and class for reduced height */
.cbp-af-header h1,
.cbp-af-header nav a {
\t -webkit-transition: all 0.3s;
\t -moz-transition: all 0.3s;
\t transition: all 0.3s;
}
.cbp-af-header.cbp-af-header-shrink {
\t height: 90px;
}
.cbp-af-header.cbp-af-header-shrink h1,
.cbp-af-header.cbp-af-header-shrink nav a {
\t line-height: 90px;
}
.cbp-af-header.cbp-af-header-shrink h1 {
\t font-size: 2em;
}
/* Example Media Queries */
@media screen and (max-width: 55em) {
\t
\t .cbp-af-header .cbp-af-inner {
\t \t width: 100%;
\t }
\t .cbp-af-header h1,
\t .cbp-af-header nav {
\t \t display: block;
\t \t margin: 0 auto;
\t \t text-align: center;
\t \t float: none;
\t }
\t .cbp-af-header h1,
\t .cbp-af-header nav a {
\t \t line-height: 115px;
\t }
\t .cbp-af-header nav a {
\t \t margin: 0 10px;
\t }
\t .cbp-af-header.cbp-af-header-shrink h1,
\t .cbp-af-header.cbp-af-header-shrink nav a {
\t \t line-height: 45px;
\t }
\t .cbp-af-header.cbp-af-header-shrink h1 {
\t \t font-size: 2em;
\t }
\t .cbp-af-header.cbp-af-header-shrink nav a {
\t \t font-size: 1em;
\t }
}
@media screen and (max-width: 32.25em) {
\t .cbp-af-header nav a {
\t \t font-size: 1em;
\t }
}
@media screen and (max-width: 24em) {
\t .cbp-af-header nav a,
\t .cbp-af-header.cbp-af-header-shrink nav a {
\t \t line-height: 1;
\t }
}<div class="cbp-af-header">
\t \t \t \t <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>
Versuchen Zusatz 'height: 100%' zu 'img' und es ist Eltern –
@DenisSheremet ich dies hier versucht, aber ohne Erfolg: https://jsfiddle.net/LhwvLgvj/1/ – michaelmcgurk
Aktualisiert mein Kommentar –