缩小滚动图像 - jQuery

时间：2016-09-29 15:31:45

标签： javascript jquery html css

我想在滚动顶部时将标题图片大小缩小到50％宽度/高度。它最好是过渡而不是突然跳到一半大小。

我已将下面的内容放在一起，但过渡发生得太晚了。如何通过它来解决这个问题？

＆＃13;
＆＃13; 
/*!
 * 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()})();
＆＃13; 
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;
	}
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：1)

更新标题动画脚本（cbpAnimatedHeader.min.js），以1px而不是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();

})();

答案 1 :(得分：1)

我认为你的代码很难，你可以这样做.. 

	$(document).on("scroll", function(){
		if
      ($(document).scrollTop() > 100){
		  $("header").addClass("shrink");
		}
		else
		{
			$("header").removeClass("shrink");
		}
	});
body{
  background: #eee;
  margin: 0;
  padding: 0;
  font-family: 'Source Sans Pro', sans-serif;
  color: #333;
}
  
header{
  width: 100%;
  padding: 40px 0;
  background: #fff;
  border-bottom: 1px solid #e1e1e1;
  /* animation magic */
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out ;
  z-index: 9999;
  top: 0;
  position: fixed;
}

header h1 {
  font-size: 30px;
  text-indent: 40px;
  font-weight:  bold;
}
    
.container {
  margin: 200px 50px;
}
  
.shrink {
  padding: 10px 0;
}
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<header>
  <h1>Lets shrink this header after scroll..</h1>
</header>
  
<section class="container">
  <p><strong>Scroll down to see the magic in action...</strong></p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ut convallis mi. Pellentesque eget tristique tortor, in lobortis sem. Sed eget lorem laoreet, interdum lectus eget, faucibus tellus. Morbi risus odio, malesuada vitae venenatis sit amet, congue et lectus. Integer velit ligula, accumsan quis sodales id, vestibulum ac nunc. Quisque rutrum pellentesque sapien, ultricies laoreet arcu porttitor non. Nunc lacinia ligula lacus, tincidunt scelerisque sem viverra et. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla finibus pharetra ullamcorper. Maecenas eleifend nibh ex, in bibendum lorem vehicula maximus. Donec in nibh vitae augue dapibus tempor id eget elit. Fusce lectus enim, pretium eget libero sed, placerat pulvinar massa. Nulla tortor dui, lacinia eu posuere quis, lobortis ut augue. Sed ullamcorper ornare enim ut rutrum. Duis et tortor ut orci iaculis molestie in nec purus.
</p>

<p>
Sed in lectus vel justo dignissim aliquam in quis felis. Nullam ex augue, rutrum accumsan lacus et, pulvinar ultricies turpis. Aliquam pulvinar lacus non ex rhoncus aliquam. Praesent efficitur ipsum odio, iaculis pulvinar sapien blandit vel. Suspendisse rhoncus velit mauris, vitae sagittis elit vestibulum et. Nullam fringilla purus viverra, fringilla magna ac, gravida nulla. Nunc feugiat dui quis aliquam ultrices. Curabitur vulputate eros id tortor dictum auctor. Maecenas risus tortor, fermentum varius bibendum nec, rhoncus vitae lorem. Cras commodo erat quis orci mattis, ac iaculis elit lacinia. Donec ac mi enim.
</p>

<p>
Aenean at laoreet sapien. Sed luctus eu justo vitae vehicula. Maecenas nec ante tristique, dictum libero et, imperdiet dui. Pellentesque ac massa id libero lacinia imperdiet et a nibh. Proin hendrerit magna eu est ornare, sit amet malesuada metus porttitor. Duis rutrum nisl eu orci sodales auctor. Cras tempor dapibus turpis eu accumsan. Quisque ullamcorper fringilla odio eu consequat. Sed a gravida tortor. Aliquam quis augue et justo pellentesque fermentum eget in nisl. Donec sit amet lacinia nisi, ac hendrerit tortor. Proin lobortis lacus in mollis accumsan. Quisque feugiat dui eu lacus bibendum, non rutrum enim faucibus. Ut in magna dictum, laoreet urna at, varius est. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus ac consectetur mi.
</p> 
  
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ut convallis mi. Pellentesque eget tristique tortor, in lobortis sem. Sed eget lorem laoreet, interdum lectus eget, faucibus tellus. Morbi risus odio, malesuada vitae venenatis sit amet, congue et lectus. Integer velit ligula, accumsan quis sodales id, vestibulum ac nunc. Quisque rutrum pellentesque sapien, ultricies laoreet arcu porttitor non. Nunc lacinia ligula lacus, tincidunt scelerisque sem viverra et. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla finibus pharetra ullamcorper. Maecenas eleifend nibh ex, in bibendum lorem vehicula maximus. Donec in nibh vitae augue dapibus tempor id eget elit. Fusce lectus enim, pretium eget libero sed, placerat pulvinar massa. Nulla tortor dui, lacinia eu posuere quis, lobortis ut augue. Sed ullamcorper ornare enim ut rutrum. Duis et tortor ut orci iaculis molestie in nec purus.
</p>

<p>
Sed in lectus vel justo dignissim aliquam in quis felis. Nullam ex augue, rutrum accumsan lacus et, pulvinar ultricies turpis. Aliquam pulvinar lacus non ex rhoncus aliquam. Praesent efficitur ipsum odio, iaculis pulvinar sapien blandit vel. Suspendisse rhoncus velit mauris, vitae sagittis elit vestibulum et. Nullam fringilla purus viverra, fringilla magna ac, gravida nulla. Nunc feugiat dui quis aliquam ultrices. Curabitur vulputate eros id tortor dictum auctor. Maecenas risus tortor, fermentum varius bibendum nec, rhoncus vitae lorem. Cras commodo erat quis orci mattis, ac iaculis elit lacinia. Donec ac mi enim.
</p>

<p>
Aenean at laoreet sapien. Sed luctus eu justo vitae vehicula. Maecenas nec ante tristique, dictum libero et, imperdiet dui. Pellentesque ac massa id libero lacinia imperdiet et a nibh. Proin hendrerit magna eu est ornare, sit amet malesuada metus porttitor. Duis rutrum nisl eu orci sodales auctor. Cras tempor dapibus turpis eu accumsan. Quisque ullamcorper fringilla odio eu consequat. Sed a gravida tortor. Aliquam quis augue et justo pellentesque fermentum eget in nisl. Donec sit amet lacinia nisi, ac hendrerit tortor. Proin lobortis lacus in mollis accumsan. Quisque feugiat dui eu lacus bibendum, non rutrum enim faucibus. Ut in magna dictum, laoreet urna at, varius est. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus ac consectetur mi.
</p>
  
</section>

相关问题
最新问题