css 使用CSS动画修复缩小标题

Posted 2021-05-13

jQuery(function( $ ){
 
	$(".site-header").after('<div class="bumper"></div>');
 
	$(window).scroll(function () {
		if ($(document).scrollTop() > 50 ) {
			$('.site-header').addClass('shrink');
		} else {
			$('.site-header').removeClass('shrink');
		}
	});
 
});

/* Shrinking fixed header, only for larger screens */
@media only screen and (min-width: 840px) {
  .site-header {
    position: fixed;
    width: 100%;
    z-index: 999;
  }
  .title-area {
    padding-top: 16px;
    padding-bottom: 0;
  }
  .site-header .wrap, .bumper {
    min-height: 100px;
  }
  .site-header, .site-header .wrap, .site-description, .site-header .wrap .title-area, .header-image .site-title, .header-image .site-title a .widget-area.header-widget-area {
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
  }
  .site-header.shrink {
    border-bottom: 1px solid #E8DEDA;
    min-height: 50px;
  }
  .shrink .wrap {
    background-color: rgba(255, 255, 255, 0.1);
    min-height: 60px;
    padding: 0;
  }
  .shrink .site-title {
    font-size: 20px;
    padding-top: 3px;
  }
  .header-image .shrink .site-title {
    padding: 0;
  }
  .header-image .shrink .site-title >a {
    min-height: 50px;
  }
  /* Use a smaller logo in the header after shrinking */
  .site-header.shrink .wrap .title-area {
    background: url("images/logo-mini2.png") no-repeat scroll left top rgba(0, 0, 0, 0);
    height: 50px;
    margin: 8px 0 0;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
  }
  .site-header.shrink .widget-area {
    padding-top: 5px;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
  }
}