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 设置动画:同时滚动到并调整大小