Search
Other Quick Index questions
Forum

Yootheme Pro + Rereplacer + QuickIndex = smooth scroll, sticky on aside

Stephan Herby's Avatar Stephan Herby
Just in case you want to see a Index on Aside part of an article, with smooth scroll and sticky when scrolling down, you can have a look here :
pacificfoodlab.nc/actualites/journee-de-...es-chefs-de-cantines

How I made It ?

How to insert the Index tag in content:
First I made a 2 columns template for my content
Left col A is 1/3 with all little info (gallery, read more, sources... and QuickIndex (Index de l'article).
Right col B is 2/3 with content.
I used Flex class "uk-flex-first uk-first-column" so the col B appear on left, and col A on right.
This allows me to display the index on the right "after" the content, whereas in the code it is before, so the {index} tag works.
Then at the end of the col A I inserted the tag {index}

Use rereplacer for the Scroll, sticky and an icone before the title:

First for the scroll part, I created a first Rereplacer where search for :
class="index-link"
and replace with
class="index-link" uk-scroll="offset: 130"

Then a second rereplacer for Sticky where search for:
role="directory"
and replace with
role="directory" uk-sticky="offset: 130; media: 770"

And a last Rereplacer with search for:
<p class="index-header">Index de l'article</p>
and replace with
<p class="index-header uk-text-uppercase uk-h5 uk-text-muted"><span uk-icon="icon: list; ratio: 1.2" class="uk-margin-small-right uk-icon"></span>Index de l'article</p>

And that's all. Now I have a beautiful index on right col, appear only if needed.
Thanks to Peter who suggested me the idea of using Rereplacer 😉
I hope 3 is not too much 😜
Peter van Westen's Avatar Peter van Westen ADMIN
Awesome work!

You could, seeing these 3 replacements all belong together to do one bigger task, combine these into 1 ReReplacer item.
Using the "Treat as List" option:
Search:
class="index-link",role="directory",<p class="index-header">Index de l'article</p>
Replace:
class="index-link" uk-scroll="offset: 130",role="directory" uk-sticky="offset: 130; media: 770",<p class="index-header uk-text-uppercase uk-h5 uk-text-muted"><span uk-icon="icon: list; ratio: 1.2" class="uk-margin-small-right uk-icon"></span>Index de l'article</p>

But if that makes it less clear for you, then fine as separate replacements too 😁
Please post a rating at the Joomla! Extensions Directory
Stephan Herby's Avatar Stephan Herby
I should have read the Rereplacer tutos... 😁
Stephan Herby's Avatar Stephan Herby
Just to let you know that I have added a tuto on Yootheme Support for this (I kept the 3 differents replacements to stay clear).
yootheme.com/support/question/140880
Peter van Westen's Avatar Peter van Westen ADMIN
Awesome!
Please post a rating at the Joomla! Extensions Directory
Jonas Bombeck's Avatar Jonas Bombeck
Hello!

Great work! This is exactly what I was looking for. Thanks for sharing 🙂

It works very well too, except for the fact that it covers the entire footer area.
Does anyone know how it remain in the background when scrolling to the footer area?

Many greetings!
Stephan Herby's Avatar Stephan Herby
Hi Jonas,
Have you tried to use some z-index ?
Jonas Bombeck's Avatar Jonas Bombeck
Hey Stephan,

thanks for your fast answer 🙂
Unfortunately I don't know exactly how to define z-index in this case.
I tried around a bit, but it didn't really work out. I have too little knowledge for that 🙁
Stephan Herby's Avatar Stephan Herby
I'm not sure I can help you, but I try 🙂
Have an URL so I can see the issue?
Jonas Bombeck's Avatar Jonas Bombeck
That would be wonderful, thank you 🙂

I have now tried it on another site where I have modified almost nothing so far. There it is exactly the same:

www.diekrassestenrekorde.de/test

Also the dropdown menu ("Rekorde") is no longer in the foreground after scrolling.
Peter van Westen's Avatar Peter van Westen ADMIN
This is very much something you should ask your template developer about (Yootheme).
You are using Yoothem classes to make it sticky.
So it is down to Yooutheme CSS styling.

Try:
#footer\#0 {
    position: sticky;
    z-index: 1000;
}
Please post a rating at the Joomla! Extensions Directory
Jonas Bombeck's Avatar Jonas Bombeck
That works, perfect!

Thanks to both of you and have a nice weekend 🙂
You can only post on the extension support forum if you have an active subscription and you log in

Buy a Pro subscription