Docs

[Laurie H]

Hi again!

Sorry, another question please…
My page content scrolls up with the page. The 2 columns on the left I wish to scroll up continuously, but the column on the right which contains an accordion, I wish to scroll up with the rest of page content, but I would like it to stop scrolling and remain fixed when it reaches the top of the page.

At the moment i have this in the custom JS:
jQuery(function($){
$(window).scroll(function(){
if( $(this).scrollTop() >= $(‘.x-main’).offset().top ) {
$(‘.x-accordion’).addClass(‘fix-accordion-position’);
}
else {
$(‘.x-accordion’).removeClass(‘fix-accordion-position’);
}
})
});

And in the custom CSS I have this:
.fix-accordion-position {
position: fixed !important;
top: 120px !important;
width: 300px !important;
}

I have added a class of .fix-accordion-position to the accordion element in Cornerstone.

The accordion starts scrolling with the rest of the page, but then it jumps to the top. And it jumps around on page reload too.
Can you advise please? I can send my login details again if you need them

Thanks again!:)

[Jade]

Hi there,

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

[Laurie H]

This reply has been marked as private.

[Nico]

Hi There,

Little bit confuse of what you are trying to achieve.

Would you mind sharing us more details of what you are trying get.

You can remove the code below to remain fix after scrolling.

$('.x-accordion').removeClass('fix-accordion-position');

Hope it helps.

Thanks.

[Laurie H]

Hello Nico

So, if you can please go to the Work Page on the site. The starting position is like the screenshot I have attached (with the 2 images on the left, and the accordion on the right, all aligned level.) Then if you scroll the page up in your browser window, all the page elements scroll up smoothly, except the blue accordion on the right side, which scrolls smoothly to start with, then it jumps into fixed position at the top of the page.

What I want to achieve is that the blue accordion scrolls smoothly up and down the page (with the other elements), as the user scrolls his browser window. But it should never go off the page at the top, hence it needs to scroll smoothly then remain in fixed position at the top (so it is always visible).

At the moment the blue accordion is not working correctly, because it jumps up the page to the top, and it jumps back down the page too.

I hope you can help with something wrong in my javascript?
Many Thanks 🙂

[Rad]

Hi there,

Please change this line of code

if( $(this).scrollTop() >= $('.x-main').offset().top ) {

to this one

if( $(this).scrollTop() >= $('.page-id-868 #x-section-2').offset().top ) {

Hope this helps.

[Laurie H]

Hi Rad,

I have changed that line and it works perfectly 🙂 Thank you so much, great support!

[Prasant Rai]

Happy to hear that. Feel free to ask us again. Have a great day! 🙂

[Author]

Posts