Left sidebar active link positioning

[itsmeypk]

Hi,

First of all, thank you for the excellent template, and it is incredible.

Coming to the issue , in the left sidebar, I have added the multiple toggle sections and making active link id=”activeLink” dynamically through JS code and using the below code to scroll to acive link.
$(window).on('load', function(){
$('#sidebar').animate({
scrollTop: $('#activeLink').offset().top - 64
}, 300);
});

Here I am facing two issues.

Issue-1: The sidebar scrolling some length but not as expected.
Issue-2: Scrolling of the left sidebar is resetting when I scroll the mouse for the main content page.

Would you please help me with the resolution for the two issues?

---

Template Version: 9.0.0

[Support]

Hello,

Sorry but I’m note sure how to reproduce the issue you mentioned in the ticket but here’s what you can try:

$(window).on('load', function(){
	setTimeout(function(){
		$('#sidebar').animate({
			scrollTop: $('#activeLink').offset().top - 64
		}, 300);
	, 1000);
});

Put a setTimeout to scroll after the toggles open. Also change the number 64 if you need.

Issue 2 I could not understand. Sorry.

Regards.

Okler Themes

---

[itsmeypk]

This reply has been marked as private.

[Support]

Hi,

Try to change from the animate and use this code:

$(window).on('load', function(){
	setTimeout(function(){
		$('#sidebar').scrollTop($('#activeLink').offset().top - 64);
	, 1000);
});

Remove that old one with $(‘#sidebar’).animate({

Let me know if you have any questions.

Kind Regards,

Jonas

---

[itsmeypk]

This reply has been marked as private.

[Support]

Hello,

The problem is that you are using the pin wrapper that is activated with scroll, so simulate scroll on page load:

$(window).on('load', function(){
	setTimeout(function(){
		window.scrollTo(window.scrollX, window.scrollY - 1);
		window.scrollTo(window.scrollX, window.scrollY + 1);
	, 500);

	setTimeout(function(){
		$('#sidebar').scrollTop($('#activeLink').offset().top - 64);
	, 1000);
});

Change the css to make the sidebar the size of the screen:

.pin-wrapper,
#sidebar:not(.sticky-active) {
    height: auto !important;
	max-height: 100% !important;
}

html.sticky-header-active #sidebar {
	max-height: 100% !important;
    height: 81vh !important;
}

html.sticky-header-active #sidebar {
    height: 93vh !important;
}

Regards.

Jonas

---

[itsmeypk]

This reply has been marked as private.

[Support]

This reply has been marked as private.

[itsmeypk]

Thank you..

---

[Author]

Posts