-
April 28, 2022, 07:33 AM
#1
Senior Member
How to make the sidebar stable on category & listing page?
Hello, I want to have the sidebar stable eventhough the main content has lots of listings or listing content
For example, if a user scroll through the page the sidebar should not be scrollable once its reached the end of sidebar which has no further blocks/sections, only the main content should be scrollable.
https://classifieds.demoflynax.com/p...san-francisco/ - stable1.jpg
https://classifieds.demoflynax.com/p...ave-88-65.html - stable2.jpg
-
Member
You need to modify stylesheet style.css at section.side_block:not(.no-style) (line 5110) to add:
position: sticky;
top:0;
Image 002.jpg
You also have to remove the overflow:hidden; property from 3 places to make the sticky work properly. Sticky does not work when parent or ancestors have overflow property.
Image 004.jpg
Now the column is following the screen while scrolling. When you get to the bottom, it moves up not to overlap with the footer.
Image 005.jpg
Last edited by daniel7; May 6, 2022 at 11:12 AM.
-
May 21, 2022, 03:05 PM
#3
Senior Member
Hello Daniel, It works fine when it has only one sidebar block.
But if we have two or more sidebar block, it overlaps the one with another.
For example, https://classifieds.demoflynax.com/u...roperties.html
In this link, we have "SEARCH FOR RESERVATIONS" another sidebar.
Do we have to sticky this css <aside class="left col-lg-3">, to have whole sidebar sticky? I applied sticky to this class, but not working.
-
May 22, 2022, 09:39 PM
#4
Member
I solved this by adding a new <div class="sticky"> so that all the blocks are inside it.
If you apply the sticky css property to this div, I will keep all the blocks inside it as a solid and move all together.