Hello,
How can I make it so my page content scrolls but my sidebar stays static?
Thanks in advance!
Derek
Hello Derek,
Thanks for writing in!
Please add following JS code in theme options panel to have sticky sidebar:
function sticky_relocate() {
var window_top = jQuery(window).scrollTop();
var div_top = jQuery('.x-main').offset().top;
if (window_top > div_top) {
jQuery('.x-sidebar').addClass('stick');
} else {
jQuery('.x-sidebar').removeClass('stick');
}
}
(function($) {
$(window).scroll(sticky_relocate);
sticky_relocate();
})(jQuery);
Then add following CSS:
.stick {
margin-top: 0 !important;
position: fixed;
top: 100px;
right: 0 !important;
z-index: 10000;
}
Thanks.
Hey, thanks very much!
Unfortunately, while the sidebar does stick - the content pops up and over when you scroll down.
How can I fix this?
Hi There,
Unfortunately, this is the downside of what you want to achieve. By default, the main content and the sidebar is inside a main container. Left content is set to have 71.79803% width and the sidebar is set to have 21.79803% width. Now making the sidebar fixed means, it is fixed relative to the entire browser and disregard the container, that’s why sidebar width now changes from 21.79803% of the container to 21.79803% of the browser. We can adjust above CSS to this, but there’s still a little bit difference:
.stick {
margin-top: 0 !important;
position: fixed;
top: 138px;
right: 72px !important;
z-index: 10000;
width: 20.1%;
}
Hope this helps.
Hey, thanks for the reply - but that doesn’t really help since it doesn’t solve the problem. Is there no other solution that would make this work?
Hi there,
Please change the CSS to this
.x-sidebar {
margin-top: 0 !important;
position: fixed;
top: 178px;
right: 72px !important;
z-index: 10000;
width: 20.1%;
}
This will make sure the transition is smooth.
Thanks.
My CSS fix for adding a sticky sidebar on this page template https://klineadventures.com/adventure/ski-in-himalayas/ was:
/Sticky sidebar nav/
.x-column.x-sm.x-1-4 {
position: -webkit-sticky;
position: sticky;
top: 120px;
}
For some reason it stopped working, can someone help me out here.
Regards,
Paul.
Hi Paul,
Thanks for writing around! position: sticky; does not have a good browser support so I’d recommend you to try the solutions provided above in this thread.
Thanks!
Hi Nabeel,
I tried inserting the code above both JS and CSS at the page level and no result. Also, I notcied that in the current code I wrote the term “sticky” seems to be invalid now and before it was valid under the previous version of Pro. So not sure what is going on there. Can you take a look and let me know how to fix it.
Paul.
Hi again,
Since you’re not using the normal sidebar so the above JS won’t work, you’ll need to use the following code instead:
function sticky_relocate() {
var window_top = jQuery(window).scrollTop();
var div_top = jQuery('.x-main').offset().top;
if (window_top > div_top) {
jQuery('.x-column.x-sm.x-1-4').addClass('stick');
} else {
jQuery('.x-column.x-sm.x-1-4').removeClass('stick');
}
}
(function($) {
$(window).scroll(sticky_relocate);
sticky_relocate();
})(jQuery);
And the CSS will become:
.stick {
margin-top: 0 !important;
position: fixed !important;
right: 72px !important;
z-index: 10000;
width: 20.1%;
}
However, it won’t work as intended because you’ve too much content in your sidebar and all won’t be displayed, some of it will get trimmed. So It’s best not to do it. If you need in depth changes I’d suggest you to consult a developer as this would be outside of our scope of support.
Thank you for understanding!
Nabeel, Thank you for this but as i said before, it was working perfectly across Chrome, Firefox and Safari with no additional JS and just the CSS I provided. I don’t understand why it is not working all of a sudden unless something has changed with the theme.
When it was working I never had any content trimmed and did not need to approach a developer… this seems like overkill when it was already working.
Why do I need the JS now and I did not before?
Paul.
Hey Paul,
If you really want to use your sticky CSS then you’ll have to add the following code in your Customizer to make it work as well:
body.single-adventure {
overflow-x: initial !important;
}
But please note that it’s not a recommended way, as the CSS I provided above may cause unexpected issues such as horizontal scrollbar, header issues or layout problem. You’ll have to use it on your own risk since sticky sidebar is not a theme’s feature and the above fix is not recommended. We might not be able to support any issue caused by this.
However the sticky functionality will work fine now.
Thank you for understanding!
I have implemented this fix as it is the best solution that works across both my targeted browsers. The issue I have is it works on some pages and not at all on others. Can you explain as I tried adding the class to the other side bars.
Works here: https://klineadventures.com/adventure/ski-in-himalayas/
Does not work here: https://klineadventures.com/company/why-us/
Again I implemented this globally a while back with no issues, I don’t understand if I have added new class (x-stick-sidebar) to the targeted column (sidebar) it should work across all pages and posts. This is clearly not the case.
Hi again,
For the global change you can replace the previous code with this:
body {
overflow-x: initial !important;
}
But again it’s not a recommended way, as the CSS may cause unexpected issues such as horizontal scrollbar, header issues or layout problem. You’ll have to use it on your own risk since sticky sidebar is not a theme’s feature and the above fix is not recommended. We might not be able to support any issue caused by this.
Thank you for your understanding!
This still does not work on the example page, can you login to get it working. Again this was a simple fix before that I implemented.
Let me know how to provide my login details.
P.
Hi again,
Add the following code in your child theme’s style.css file:
.x-column.x-sm.x-1-4 {
position: -webkit-sticky;
position: sticky;
top: 120px;
}
Hope this helps!
@Nabeel this code is already present in my CSS and in fact is the original code that was working but is no longer. It seems like we are going in circles. Is it possible for you to ask a colleague?
Paul.
UPDATE – I seem to have found a solution.
Glad you’ve sorted it out.
Cheers!