[SmarticleParticipant]

Hi there,

I don’t know if this is over ambitious or not but I’d like to have a widget side menu scroll up and down with the page. Currently I have a page set up where each month of the membership will have a long list of files that can be downloaded. Ideally these need to be kept in pairs which leaves wasted space on the left underneath the widget. Is it possible to make use of this space by allowing the side menu to scroll up and down with the page? If so how is this achieved. Currently I have added some simple buttons that allow the user to jump to the desired sections. Would this menu also need to be created as a separate widget?

http://elevenplusify.wpengine.com/bronze-month1/

Thanks

[DarshanaModerator]

Hi there,

Thanks for writing in! Regretfully, at this time I am not entirely certain what it is you would like to accomplish based on the information given in your post. If you wouldn’t mind providing us with a little more clarification on what it is you’re wanting to do (a link to a similar example site would be very helpful, or perhaps some screenshots), we’ll be happy to provide you with a response once we have a better understanding of the situation.

Are you looking for similar effect like this? (https://theme.co/x/member/forums/topic/fixed-sidebar-2/).

Thanks!

[SmarticleParticipant]

Yes a fixed side bar is what I believe I want 😀 I likely got confused because I interpreted the word fixed as doesn’t move (which technically I guess it doesn’t as it allows it to scroll with the page).

This has a similar effect to what I want yes 🙂

http://katalyst5.com/wp/

[NicoModerator]

Hi There,

Thanks for clarifying. You could check the thread below for the custom coding of fixed sidebar.

https://theme.co/x/member/forums/topic/fixed-sidebar/page/2/#post-63547

Hope it helps.

thanks.

[SmarticleParticipant]

Thanks for providing that link, but the following code didn’t seem to do anything. Do I need to edit any specific parameters to make it work for mine?

Instead of the old JS+CSS code, please add the following code:

CSS Code (Customizer > Custom > CSS):

@media (min-width:980px) {
.x-sidebar.right {
position: relative;
}
.widget.fix_my_position {
position: fixed;
width: 20%;
}
}
JavaScript Code (Customizer > Custom > JavaScript):

jQuery(function($){
$(window).scroll(function(){
if( $(this).scrollTop() >= $(‘.x-main’).offset().top ) {
$(‘.x-sidebar .widget’).addClass(‘fix_my_position’).css({ top:$(‘.x-navbar’).height() });
}
else {
$(‘.x-sidebar .widget’).removeClass(‘fix_my_position’);
}
})
});

[guy_bParticipant]

Hi,

Another easy way is to use a plugin:

https://wordpress.org/plugins/sticky-menu-or-anything-on-scroll/

All you need to do then is put a menu into a widget, and if the menu is made up of anchor links, it will work automatically with the scroll effect.

It might need some z-index adjustments for the bottom of the page so that is scrolls under the footer.

[Paul RModerator]

Hi,

Thanks for the tip.

Have a nice day!

[SmarticleParticipant]

@ guy_b thanks for the link to that plugin, it appears to work quite nicely. However, regarding what you say about the scrolling under the footer. I ideally want to control how far down it scrolls so that it doesnt even reach the footer. Can this be acheived?

@Staff If this plugin cannot give me what I need how can I achieve the scrolling widget as it functions as it is and but stop it from reaching the footer using CSS?

Ideally it may be needed to be done with CSS as the plugin only seems to have global parameter settings rather than for each individual sticky element.

Thanks

[ZeshanMember]

Hi @Smarticle,

Upon checking your website, the widget is fixed while scrolling. However, stopping it when reaching the footer could be possible but will require more in depth JavaScript and CSS customization. Regretfully, that would be outside the scope of support we can offer. You may wish to consult a developer to assist you with this.

Thanks for understanding.

[SmarticleParticipant]

Thanks for all the support for this. I was hoping this question would fall within your scope of your support.

Using the Q2W3 Fixed widget plugin, I have managed to achieve exactly what I needed, however the anchor links I am using stop working if the page is scrolled down to a certain point. It seems that once the content band that features the ‘Verbal Reasoning’ title pass the bottom of the widget, the links stop working. But if I scroll back up then they work again.

Is it possible to investigate the cause of this?

http://elevenplusify.wpengine.com/bronze-month1

Thanks again for the brilliant support offered on here.

[ZeshanMember]

Hi there,

Glad to hear you were able to achieve it! 🙂

In regard to the links issue, this is due to the z-index value. To fix this, you can use following CSS code under Custom > CSS in the Customizer:

.x-main .widget {
  z-index: 1;
}

Thanks!

[SmarticleParticipant]

Works great!

Thanks alot 🙂

[Paul RModerator]

You’re welcome!

[SmarticleParticipant]

Thanks again for the support getting this plugin configured. Especially since its third party. I have one final issue (more of a bother really) with it that I was hoping you could shed some light on.

It works brilliantly and functions as it should but there is an unattractive ‘jump’ when the widget begins scrolling into its fixed position. I’ve looked on the main support page for it and it seems like it may have something to do with the ‘position: relative’? Can any CSS be provided to smooth the transition when it scrolls?

http://elevenplusify.wpengine.com/introductory-month-1/

Thanks

[ThaiModerator]

Hi There,
You can try the Smooth Scroll Extension, for more information about this extension, please take a look at this link: https://theme.co/x/member/kb/extension-smooth-scroll/.
Let us know how it goes.
Regards!

[Author]

Posts