css Dynamik中滚动的动画调整大小标题

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了css Dynamik中滚动的动画调整大小标题相关的知识,希望对你有一定的参考价值。

jQuery(function( $ ){

	$(document).on("scroll", function(){

		if($(document).scrollTop() > 100){

			$(".site-header").addClass("shrink");

		} else {

			$(".site-header").removeClass("shrink");

		}

	});

});
<?php
//* Do NOT include the opening php tag shown above. Copy the code shown below.

	/* Do not remove this line. Add your functions below. */

	/**********************************
 *
 * Replace Header Site Title with Inline Logo
 *
 * Fixes Genesis bug - when using static front page and blog page (admin reading settings) Home page is <p> tag and Blog page is <h1> tag
 *
 * Replaces "is_home" with "is_front_page" to correctly display Home page wit <h1> tag and Blog page with <p> tag
 *
 * @author AlphaBlossom / Tony Eppright
 * @link http://www.alphablossom.com/a-better-wordpress-genesis-responsive-logo-header/
 *
 * @edited by Sridhar Katakam
 * @link http://www.sridharkatakam.com/use-inline-logo-instead-background-image-genesis/
 *
************************************/
add_filter( 'genesis_seo_title', 'custom_header_inline_logo', 10, 3 );
function custom_header_inline_logo( $title, $inside, $wrap ) {
 
	$logo = '<img src="http://genesis.dev/wp-content/uploads/dynamik-gen/theme/images/amware_logo_r.png" alt="' . esc_attr( get_bloginfo( 'name' ) ) . '" title="' . esc_attr( get_bloginfo( 'name' ) ) . '">';
 
	$inside = sprintf( '<a href="%s" title="%s">%s</a>', trailingslashit( home_url() ), esc_attr( get_bloginfo( 'name' ) ), $logo );
 
	//* Determine which wrapping tags to use - changed is_home to is_front_page to fix Genesis bug
	$wrap = is_front_page() && 'title' === genesis_get_seo_option( 'home_h1_on' ) ? 'h1' : 'p';
 
	//* A little fallback, in case an SEO plugin is active - changed is_home to is_front_page to fix Genesis bug
	$wrap = is_front_page() && ! genesis_get_seo_option( 'home_h1_on' ) ? 'h1' : $wrap;
 
	//* And finally, $wrap in h1 if HTML5 & semantic headings enabled
	$wrap = genesis_html5() && genesis_get_seo_option( 'semantic_headings' ) ? 'h1' : $wrap;
 
	return sprintf( '<%1$s %2$s>%3$s</%1$s>', $wrap, genesis_attr( 'site-title' ), $inside );
 
}

//* Remove the site description
remove_action( 'genesis_site_description', 'genesis_seo_site_description' );

//* Enqueue Headroom
add_action( 'wp_enqueue_scripts', 'sk_enqueue_scripts' );
function sk_enqueue_scripts() {

	wp_enqueue_script( 'jquery-headroom',  get_bloginfo('url') . '/wp-content/js/general.js', array( 'jquery' ), '', true );

}
.site-header {
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 999;
    min-height: 0;
    padding-top: 20px;
    padding-bottom: 20px;
}

.admin-bar .site-header {
    top: 32px;
}

.shrink .genesis-nav-menu a {
    font-size: 14px;
}

.feature-top-outside #ez-feature-top-container-wrap {
    margin-top: 112px;
}

.site-title a {
      width: 300px;
    display: block;
  /*-webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -ms-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;*/
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition:    all 0.2s ease-in-out;
    -ms-transition:     all 0.2s ease-in-out;
    -o-transition:      all 0.2s ease-in-out;
    transition:         all 0.2s ease-in-out;
}


.site-title a img { 
      display: block;
}

.site-header.shrink {
        padding-top: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #ddd;
}

.site-header.shrink .site-title a {
    width: 50%;
    height: 50%;
}

.shrink .title-area {
    padding-top: 8px;
}

@media only screen and (max-width: 1024px) {

    .site-header {
        position: static;
    }
    
    .site-title a {
        margin: 0 auto;
    }
    
    .feature-top-outside #ez-feature-top-container-wrap {
        margin-top: 0;
    }

}

以上是关于css Dynamik中滚动的动画调整大小标题的主要内容,如果未能解决你的问题,请参考以下文章

为 UICollectionViewCell 设置动画:同时滚动到并调整大小

调整帧大小后的 UITableView 滚动速度

如何动画调整滚动上较小的徽标图像?

调整滚动视图框架的大小时,UIScrollView 子视图的大小调整不正确

css 三个标题,只有Dynamik徽标和标题右侧区域

csp怎么调滚动条大小