Reduce sticky header size

i don’t know where the point is and why it does not work – the concerning code is in avia.js:

if(shrinking && !isMobile)
{
    if(st < el_height/2)
    {
        newH = el_height - st;
        if(st <= 0){
			newH = el_height;
	    }        
        av_change_class(header, 'remove', 'header-scrolled');
        //header.removeClass('header-scrolled');
    }
    else
    {
        newH = el_height/2;
        //header.addClass('header-scrolled');
        av_change_class(header, 'add', 'header-scrolled');
    }
    
    if(st - 30 < el_height)
    {
        av_change_class(header, 'remove', 'header-scrolled-full');
    }
    else
    {
        av_change_class(header, 'add', 'header-scrolled-full');
    }
    elements.css({'height': newH + 'px', 'lineHeight': newH + 'px'});
	logo.css({'maxHeight': newH + 'px'});
}

• This reply was modified 8 years ago by Guenni007.

i tried that – because in my remembering i did that allready a few month ago. But on one installation (all on latest updates Enfold and WP) on scrolling down ( f.e. 3 is set in for the 2) there are strange reactions on that.

On that test i had set the header height to 300px ( the same on not so extreme values – but calculating is much easier)
on reaching 200px ( the addition of class header-scrolled happend (2/3 ???) ) and the logo height than jumps to 1/3 of 300px (the setting)

we have to think about the code because it only works with 2 – Why? : because scroll distance is on that point of change the rest of the distance to top is equal to scrolling-down distance 150px

but see case above with 3 – scrolling down 100px ( the distance to top is 200px)

so here is my quintessence: you have to set the first value to 1.5 and the second to 3
the scroll distance when the jump to the additional class must be on that point when it reaches the header height end point
the header should end at 100px (1/3) so we have to subtract 200px ( and 200px are 2/3 of starting header height! – on that code you have to take the reciprocal value 3/2 = 1.5

see here: http://webers-testseite.de/ikom/

so this is the code ( from line 1604 of avia.js) on that :

if(shrinking && !isMobile)
{
    if(st < el_height/1.5)
    {
        newH = el_height - st;
        if(st <= 0){
			newH = el_height;
	    }
        av_change_class(header, 'remove', 'header-scrolled');
        //header.removeClass('header-scrolled');
    }
    else
    {
        newH = el_height/3;
        //header.addClass('header-scrolled');
        av_change_class(header, 'add', 'header-scrolled');
    }

• This reply was modified 8 years ago by Guenni007.

PS i changed it to a big amount of shrinking for another thread here on forum and placed an absolute Button above the logo – for you it is important to see only the logo under that button.
( it is now if(st < el_height/1.01) and newH = el_height/3; )

• This reply was modified 8 years ago by Guenni007.

did you read it carefully? i can see that your logo jumps after scrolling to its end height, and transparency has strange behavior – so try the values noted on the code

your header starts at 220px (custom value) you want to end at 95px (?) so the distance you have to scroll for changing class of the header is 125px

if(shrinking && !isMobile)
{
    if(st < el_height/1.76)
    {
        newH = el_height - st;
        if(st <= 0){
			newH = el_height;
	    }
        av_change_class(header, 'remove', 'header-scrolled');
        //header.removeClass('header-scrolled');
    }
    else
    {
        newH = el_height/2.31;
        //header.addClass('header-scrolled');
        av_change_class(header, 'add', 'header-scrolled');
    }

because 220/1.76 = 125
and 220/2,31 = 95,23

that means – after scrolling down 125px the new Header Height is at its endpoint of 95px

Hi, i have the same problem.
I’m using a childtheme and added this code in my function.php

/* Sticky-Header */

function wp_change_aviajs() {
   wp_dequeue_script( 'avia-default' );
   wp_enqueue_script( 'avia-default-child', get_stylesheet_directory_uri().'/js/avia.js', array('jquery'), 2, true );
}
add_action( 'wp_print_scripts', 'wp_change_aviajs', 100 );

I copied the avia.js in my childtheme folder childtheme/js/avia.js and added this code:

   //check if the browser supports element rotation
    function avia_header_size()
    {
        var win				= $(window),
            header          = $('.html_header_top.html_header_sticky #header'),
            unsticktop		= $('.av_header_unstick_top');
            
        if(!header.length && !unsticktop.length) return;
        
        var logo            = $('#header_main .container .logo img, #header_main .container .logo a'),
            elements        = $('#header_main .container:not(#header_main_alternate>.container), #header_main .main_menu ul:first-child > li > a:not(.avia_mega_div a, #header_main_alternate a), #header_main #menu-item-shop .cart_dropdown_link'),
            el_height       = $(elements).filter(':first').height(),
            isMobile        = $.avia_utilities.isMobile,
            scroll_top		= $('#scroll-top-link'),
            transparent 	= header.is('.av_header_transparency'),
            shrinking		= header.is('.av_header_shrinking'),
            topbar_height	= header.find('#header_meta').outerHeight(),
            set_height      = function()
            {	
                var st = win.scrollTop(), newH = 0, st_real = st;
				
				if(unsticktop) st -= topbar_height; 
				if(st < 0) st = 0;
				
				if(shrinking && !isMobile)
                {
	                if(st < el_height/1.5)
	                {
	                    newH = el_height - st;
	                    if(st <= 0){
							newH = el_height;
					    }
	                    
	                    av_change_class(header, 'remove', 'header-scrolled');
	                    //header.removeClass('header-scrolled');
	                }
	                else
	                {
	                    newH = el_height/3;
	                    //header.addClass('header-scrolled');
	                    av_change_class(header, 'add', 'header-scrolled');
	                }
	                
	                if(st - 30 < el_height)
	                {
	                    av_change_class(header, 'remove', 'header-scrolled-full');
	                }
	                else
	                {
	                    av_change_class(header, 'add', 'header-scrolled-full');
	                }
	                
	                
	                elements.css({'height': newH + 'px', 'lineHeight': newH + 'px'});
                	logo.css({'maxHeight': newH + 'px'});
                }
                
                if(unsticktop.length)
            	{
                	if( st <= 0)
                	{
	                	if(st_real <= 0) st_real = 0;
                		unsticktop.css({"margin-top":"-"+st_real+"px"});
					}
					else
					{
                		unsticktop.css({"margin-top":"-"+topbar_height+"px"});
					}
            	}
                
                if(transparent)
                {	
                	if(st > 50)
                	{	
                		//header.removeClass('av_header_transparency');
                		av_change_class(header, 'remove', 'av_header_transparency');
                	}
                	else
                	{
                		//header.addClass('av_header_transparency');
                		av_change_class(header, 'add', 'av_header_transparency');
                	}
                }

               
            };

            if($('body').is('.avia_deactivate_menu_resize')) shrinking = false;
            
            if(!transparent && !shrinking && !unsticktop.length) return;
            
			win.on( 'debouncedresize',  function(){ el_height = $(elements).attr('style',"").filter(':first').height(); set_height(); } );
            win.on( 'scroll',  function(){ window.requestAnimationFrame( set_height )} );
            set_height();
    }

But it doesn’t work.
Any ideas?
Thank you.

what makes me wonder is that it works the old way on a test site with new Enfold 4.3 ?

I would have assumed, first, to deregister the parent function

Edit: i did it this way now – seems to work:

add_action( 'wp_enqueue_scripts', 'wp_change_sticky_header_script', 100 );
function wp_change_sticky_header_script() {
   wp_deregister_script( 'avia-sticky-header' );
   wp_enqueue_script( 'avia-sticky-header-child', get_stylesheet_directory_uri().'/js/avia-snippet-sticky-header.js', array('avia-default'), $vn, true);
}

and then upload an edited avia-snippet-sticky-header.js to child-theme/js/ folder

@Guenni007
Wenn es okay ist antworte ich lieber auf Deutsch.

Die Werte sind nur Testwerte gewesen, um zu schauen ob es klappt. Wenn ich alles richtig verstanden habe, dann muss ich als Startwert 1.56 und als Zielwert 2.8 eingeben. Ich starte nämlich bei 280px und möchte bei 100px enden.

Ich habe nun folgendes in die function.php eingetragen:

add_action( 'wp_enqueue_scripts', 'wp_change_sticky_header_script', 100 );
function wp_change_sticky_header_script() {
   wp_deregister_script( 'avia-sticky-header' );
   wp_enqueue_script( 'avia-sticky-header-child', get_stylesheet_directory_uri().'/js/avia-snippet-sticky-header.js', array('avia-default'), $vn, true);
}

Und folgendes in die kopierte avia-snippet-sticky-header.js im Ordner enfold-child/js/…:

if(shrinking)
{
    if(st < el_height/1.5)
    {
        newH = el_height - st;
        if(st <= 0){
			newH = el_height;
	    }
        
        av_change_class(header, 'remove', 'header-scrolled');
        //header.removeClass('header-scrolled');
    }
    else
    {
        newH = el_height/2.8;
        //header.addClass('header-scrolled');
        av_change_class(header, 'add', 'header-scrolled');
    }

Leider klappt es nicht. Oder muss ich die komplette avia-snippet-sticky-header.js Datei kopieren und nur die Werte ändern?
Habe jetzt im Moment nur eine .js Datei mit dem entsprechenden Namen angelegt und den Code hineinkopiert.
Danke dir für die Hilfe!

Super, danke dir!
Werde es morgen früh sofort testen und dann Bescheid geben.
Danke und schönen Abend noch!

• This reply was modified 6 years, 8 months ago by designereck.

Moin!
Danke erst mal für den ganzen Support!
Leider klappt es immer noch nicht. Habe jetzt die komplette .js Datei genommen und nur die Werte geändert. Leider tut sich da immer noch nichts. Die Höhe bleibt bei 130px. Ist das ein Unterschied, wenn ich lokal mit MAMP arbeite? Sollte doch eigentlich nicht?!

EDIT
Wenn ich die Werte in der .js Datei im Haupttheme Ordner ändere funktioert es perfekt …

• This reply was modified 6 years, 8 months ago by designereck.

Hallo Guenni007,
vielen vielen Dank!

Ich habe es über Umwege hinbekommen. Die .js Datei wird/wurde nicht im Child Ordner angesprochen. Habe dann die Änderung im Parent Theme Ordner gemacht, in den Child Ordner kopiert und dann wieder im Parent Ordner zurück geändert. Es laufen keine Minimizer oder Cachingtools. Für mich irgendwie nicht alles verständlich. Zumal ich deine Liste genau abgearbeitet habe und meine style.css läuft ja auch. Aber es läuft jetzt!
Bin nur mal gespannt, es das noch tut, wenn ich es online bringe, oder mal ne Nacht drüber schlafe …
Auf jeden Fall vielen Dank für deine Geduld und deine Hilfe!
Falls es, aus welchen Gründen auch immer, nicht mehr funktioniert melde ich mich noch mal.

EDIT
Es funktioniert wirklich nur, wenn ich die Werte im Parent Theme änder.

• This reply was modified 6 years, 8 months ago by designereck.