Header animation - Support | Kriesi.at - Premium WordPress Themes

Hello,

I’ve a sticky menu when scrolls
now i want to make a animation a kind of fade in…

Ive this code

<script>
jQuery(window).scroll(function(){
if(jQuery(this).scrollTop() < 10) jQuery('#header_main_alternate').removeClass('custom-header');
if(jQuery(this).scrollTop() > 400) jQuery('#header_main_alternate').addClass('custom-header');
});
</script>

April 16, 2015 at 9:41 am #429444

Hey,

Can anyone react?

kind regards

April 17, 2015 at 6:13 am #430092

Hey!

Thank you for using Enfold.

Add this to the functions.php file:

add_action('wp_footer', 'ava_custom_script_mod');
function ava_custom_script_mod(){
?>
<script>
(function($){
	$(window).scroll(function(){
		var scrolled = $(this).scrollTop(),
			adminbar = parseInt($('#wpadminbar').height()) || 0;
		
		if(scrolled >= 200) {
			$('#header_main_alternate').addClass('custom-header').css('margin-top', adminbar);		
		} else {
			$('#header_main_alternate').removeClass('custom-header').css('margin-top', 0);
		}
	});
})(jQuery);
</script>
<?php
}

then add this in the Quick CSS field:

.custom-header {
  position: fixed;
  top: 0;
  width: 100%;
  border-bottom: 1px solid #ff9900;
  -webkit-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
  -moz-box-shadow: rgba(0,0,0,0.3) 0 1px 3px;
  box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
  z-index: 5000;
  -webkit-animation: custom-header-show 1s 1 cubic-bezier(0.175, 0.885, 0.320, 1.075); /* Safari 4+ */
  animation: custom-header-show 1s 1 cubic-bezier(0.175, 0.885, 0.320, 1.075); /* IE 10+ */
}

@-webkit-keyframes custom-header-show {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes custom-header-show {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

Best regards,
Ismael

April 17, 2015 at 8:39 am #430163

When i add the js code my website broke down…
Where can i find mine folder where the child theme is?
in my file manager..

April 17, 2015 at 8:56 am #430172

Hey!

You need to add the code in the functions.php file. If you have a child theme, you can create another functions.php file then place the code there. Please refer to this link: http://kriesi.at/documentation/enfold/using-a-child-theme/

Best regards,
Ismael

April 17, 2015 at 5:17 pm #430451

I already put the ocde in my child theme …

this is my code now:

<?php

/*
* Add your own functions here. You can also copy some of the theme functions into this file. 
* WordPress will use those functions instead of the original functions then.
*/

add_filter( 'avf_google_heading_font', 'avia_add_heading_font');
function avia_add_heading_font($fonts)
{
	$fonts['Great Vibes'] = 'Great Vibes:400';
	return $fonts;
}

add_filter( 'avf_google_content_font', 'avia_add_content_font');
function avia_add_content_font($fonts)
{
	$fonts['Great Vibes'] = 'Great Vibes:400';
	return $fonts;
}

add_action('wp_footer', 'ava_custom_script_mod');
function ava_custom_script_mod(){
?>
<script>
(function($){
	$(window).scroll(function(){
		var scrolled = $(this).scrollTop(),
			adminbar = parseInt($('#wpadminbar').height()) || 0;
		
		if(scrolled >= 200) {
			$('#header_main_alternate').addClass('custom-header').css('margin-top', adminbar);		
		} else {
			$('#header_main_alternate').removeClass('custom-header').css('margin-top', 0);
		}
	});
})(jQuery);
</script>
<?php

IT doest work if i use this code the whole site dont work….

April 17, 2015 at 5:18 pm #430453

This reply has been marked as private.

April 19, 2015 at 4:20 am #430798

Hey!

Sorry about that. There’s a missing bracket right after the last line:

<?php

Replace it with:

<?php
}

Make sure to replace the css codes in the Quick CSS field.

Regards,
Ismael

April 19, 2015 at 5:11 pm #430902

THANKYOU!

Still one more thing

if i scroll down and the menu went fixed then the page is leaping
so if i scroll and the menu go fixed the the page goes a little bit up.
I doest go smoothly…

Like this
http://stanhub.com/tutorials/sticky-navigation/#

Kind regards

April 20, 2015 at 2:50 am #431021

Hey!

Replace the code with this:

add_action('wp_footer', 'ava_custom_script_mod');
function ava_custom_script_mod(){
?>
<script>
(function($){
	$(window).scroll(function(){
		var scrolled = $(this).scrollTop(),
			adminbar = parseInt($('#wpadminbar').height()) || 0,
			menuh    = $('#header_main_alternate').height();
			
		if(scrolled >= 200) {
			$('#header_main_alternate').addClass('custom-header').css('margin-top', adminbar);
			$('#header').css('padding-bottom', menuh);		
		} else {
			$('#header_main_alternate').removeClass('custom-header').css('margin-top', 0);
			$('#header').css('padding-bottom', 0);
		}
	});
})(jQuery);
</script>
<?php
}

Cheers!
Ismael

April 20, 2015 at 9:58 am #431179

THANKYOU VERY MUCH:)

April 20, 2015 at 3:03 pm #431310