0
我目前正在建立一個小型網站，並希望在向下滾動頁面時縮小該圖標。滾動時收縮圖像
目前它的工作方式是，標題大小下降，但徽標保持不變。
我該如何解決這個問題，讓它縮小圖像呢？
演示：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>
嘗試增加'高度：100％'你'img'和它的父 –
@DenisSheremet我在這裏試過，但沒有成功：https://jsfiddle.net/LhwvLgvj/1/ – michaelmcgurk
更新我的評論 –