change the timing of the shrinking header - Support | Kriesi.at

Viewing 7 posts - 1 through 7 (of 7 total)

Author

Posts
August 26, 2024 at 5:52 pm #1465439

nTECHgrate
Participant

I am using the shrinking header feature, but I would like to change the timing of when it shrinks. Ideally, I would like to control this with a scroll depth, but if that is too complicated, I could also accomplish what I want by applying an attribute to the color section where I want it to shrink.

Any help you can provide would be greatly appreciated.

-James

August 27, 2024 at 6:36 am #1465465
Ismael
Moderator
Hey James,

Thank you for the inquiry.

That is possible, but it will require significant modifications to the script. If you want to try, you can edit the enfold/js/avia-snippet-sticky-header.js file. This block shrinks the header:
```
if( shrinking && ! isMobile )
				{
					if( st < shrink_val )
					{
						newH = el_height - st;
						if( st <= 0 )
						{
							newH = el_height;
						}

						av_change_class( header, 'remove', 'header-scrolled' );
						//header.removeClass('header-scrolled');
					}
					else
					{
						newH = el_shrinked;
						//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'});
				}
```
Best regards,
Ismael
August 28, 2024 at 8:46 am #1465537
Guenni007
Participant
the timing depends on the scroll speed. Therefore, this cannot be changed. However, you could either set a fixed size after which the shrink process should only start, or – even more flexibly – provide an element with a trigger that only then starts the shrink event.

set a class to trigger that color-section ( use it only once on the page )
i use now trigger – here as custom class.

and added a variable to that list ( just under topbar_height ) – and changed calculation:
```
topbar_height	= header_meta.length ? header_meta.outerHeight() : 0,
trigger_distance = $('.trigger').length ? $('.trigger').offset().top - $('.trigger').height() + el_height - 50  : 0 ,

set_height = function()
{
	var st = win.scrollTop() - trigger_distance,
		st_real = st; newH = 0
```
i do not know why i had to insert a correction distance (50px) ( alot depends on if your header_meta scrolls away or not etc. )

you know how to have a child theme avia-snippet-sticky-header.js ?

see example page – and scroll to that colored section on bottom: https://webers-testseite.de/anders/
August 28, 2024 at 9:07 am #1465538
Guenni007
Participant
Unfortunately my change still suffers from the fact that the change does not work on resize – maybe one of the mods has an idea how to update the trigger_distance on resize.

Edit: – i added to that debouncedresize function on the bottom ( lines 165ff) – that var again:
```
win.on( 'debouncedresize',  function()
{
	el_height = $( elements ).attr( 'style',"" ).first().height();
	set_height();
	trigger_distance = $('.trigger').length ? $('.trigger').offset().top - $('.trigger').height() + el_height - 50  : 0 ;
});
```
here is my whole avia-snippet-sticky-header.js : https://pastebin.com/9nCV8GiV
August 29, 2024 at 1:42 am #1465624
nTECHgrate
Participant
OK, I used your code and asked a friend to help me modify it to accomplish what I am trying to do. Where do I add this code and do so in a way that it won’t get overwritten with future Enfold updates?
```
// Define the scroll position where the header starts shrinking
var shrink_val = 150; // <-- Change this value to adjust when the header starts shrinking

if (shrinking && !isMobile) {
    if (st < shrink_val) { // <-- This condition determines when the shrinking starts
        newH = el_height - st;
        if (st <= 0) {
            newH = el_height;
        }

        av_change_class(header, 'remove', 'header-scrolled');
    } else {
        newH = el_shrinked;
        av_change_class(header, 'add', 'header-scrolled');
    }

    // Adjust the threshold for the "fully scrolled" state
    if (st - 30 < el_height) { // <-- You can modify el_height or the -30 value to change when this triggers
        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' });
}
```
August 29, 2024 at 7:49 pm #1465695

nTECHgrate
Participant

OK, after pulling all my hair out multiple times, we went in a slightly different direction. For anyone else stumbling across this post, check out my other ticket to see our solution:

https://kriesi.at/support/topic/have-sub-menu-replace-header/#post-1465440

You can close this ticket.

Thank you

-James

August 30, 2024 at 11:44 am #1465762

Ismael
Moderator

Hi,

Glad to know that you managed to find a working solution. Please let us know if you have more questions about the theme.

Have a nice day.

Best regards,
Ismael
Author

Posts

Viewing 7 posts - 1 through 7 (of 7 total)

The topic ‘change the timing of the shrinking header’ is closed to new replies.