1
私はそれを上にスクロールするとすぐに私のヘッダー画像のサイズを50％幅/高さに縮小したいと思います。好ましくは、それは移行し、突然サイズの半分にジャンプしないであろう。スクロールで画像を縮小する - jQuery
私は以下のものをまとめましたが、移行が遅すぎます。どのように私はそれを渡すとすぐに起こるようにこれを修正するのですか？
/*!
* 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 {
\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>
このリンクを確認してください：-http：//callmenick.com/post/animated-resizing-header-on-scroll必要に応じて幅と高さを必要に応じて変更します。 –