Different scroll offset of toggles on desktop and mobile view

Hi Ismael

The new code doesn’t work. I can open and close a toggle once but then no toggle can be opened again. Please see Link in Private Content.

Kind regards
Ueli

Hi Ismael

Your new code…

 //check if toggle title is in viewport. if not scroll up
	var el_offset = content.offset().top,
	scoll_target = el_offset - 50 - parseInt($('html').css('margin-top'),10);
	$scoll_target_offset = 100;

if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)){
   	$scoll_target_offset = 10;
}

$('html:not(:animated),body:not(:animated)').animate({scrollTop: scoll_target - $scoll_target_offset},200);
}

… doesn’t work either.

And how reliable is your approach of device detection?
Wouldn’t it be easier to make the code dependent of the screen width – as I’ve written in my initial post – because the header isn’t sticky if the screen width is less than 768px, regardless of the device?

We know that the code mentioned in my initial post is doing well with a sticky header.
Couldn’t we change the line…

$('html:not(:animated),body:not(:animated)').animate({scrollTop: scoll_target - 100},200);

…to something like that?

if ($(window).width() < 768) {				    
$('html:not(:animated),body:not(:animated)').animate({scrollTop: scoll_target - 10},200);
} else {
$('html:not(:animated),body:not(:animated)').animate({scrollTop: scoll_target - 100},200);
				}

Before, shouldn’t there be a declaration of the variable var width = $(window).width()? But I don’t know where exactly.

Kind regards
Ueli

Hi Ismael
The code looks now like this…

 //check if toggle title is in viewport. if not scroll up
				    var el_offset = content.offset().top,
				        scoll_target = el_offset - 50 - parseInt($('html').css('margin-top'),10);
				    
				        $scoll_target_offset = $(window).width() < 768 ? 10 : 100;
$('html:not(:animated),body:not(:animated)').animate({scrollTop: scoll_target - $scoll_target_offset},200);

…but it doesn’t work. I can open and close one toggle but no other toggle can be opened.
Kind regards
Ueli

Hi Ismael

The code is working now quite well.

But there is a new issue with the first toggle “Schulen und Gruppen im Lager”. The long title gets a line break on small screens (less than 447px) what makes the toggle higher. As a result, the toggle isn’t completely visible when I open it. It’s partially cut by the upper screen border. All other toggles stay completely visible when activated. Why does this happen? Isn’t the upper border of a toggle the reference point of the offset?

I realize, that the whole concept of the accordion’s mode “one toggle open at a time” in combination with a sticky header stays very tricky.

Kind regards
Ueli

Hi Ismael

Right now, I can live with the current state. It might be a claim or a goal for Enfold‘s developers to bring the accordion‘s behavior to perfection in a future update.

Thank you very much for your help and your patience with a picky customer.

Kind regards
Ueli