Docs

[meranomaia]

Hello there,

i have successfully created a fixed sidebar: http://bit.ly/1Op8OMz

Is it possible to change the CSS / Java Script in order to float the sidebar to her very end?

Thanks,

Martin

[Rupok]

Hi Martin,

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.

[meranomaia]

Hi and thank you for your answer, i try to explain better:

If i watch this page on a 15″ Monitor, only 4 of the 5 Essential Grid Elements are shown.
So, i need help to have a fixed sidebar as it is now, but that scrolls down anyway to the bottom of the sidebar and shows all 5 elements of the sidebar before becoming fixed.

Thanks,

Martin

[Rue Nel]

Hello Martin,

Thanks for the clarifications! To resolve this issue, please find this custom css block:

.widget.fix_my_position{
  position:fixed;
  width:20%;
}

You need to replace it with this code instead:

.widget.fix_my_position {
    position: fixed;
    width: 20%;
    overflow: scroll;
    height: 100%;
}

We would loved to know if this has work for you. Thank you.

[meranomaia]

Hi,thanks fot the fast help!
I have changed the CSS Code as you told me, bit i’d like the sidebar to scroll down with normal page scrolling, without a own scrollbar of the sidebar.
Is that possible?

Thanks, have a nice day!

Martin

[Rue Nel]

Hello Martin,

If you want it to scroll along with the page, you need not to have a fixed sidebar. Or at least only make the sidebar fixed it you are viewing the site on a larger screen. Perhaps you can update your JS code to something like this:

jQuery(function($){
	$(window).scroll(function(){	
	  var W = $(window).width();

	  if(  W > 1280 ){   		
		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');
		}
	  }
	});
}); 

With this code, you will only have a fixed sidebar if your browser screen is wider than 1280 pixels.
Hope this helps. Please let us know how it goes.

[meranomaia]

Hello,

that works great now on large screens, thanks!
Is there no way to have the sidebar WITHOUT scrollbar an normal screens like on my 15″ mbpro? (see my attachment)

Thanks,

martin

[Rue Nel]

Hello There,

If you do not want the sidebar, then you cannot scroll the sidebar. You won’t be able to see all the contents of your sidebar as it would remains fixed. If ever you want to hide the scrollbars but still want to ability to scroll on the sidebar, please check out this link: http://stackoverflow.com/questions/16670931/hide-scroll-bar-but-still-being-able-to-scroll

As this is all custom development, regretfully we won’t be able to assist further. Custom development is outside the scope of our support. We’re happy to provide advice and get you started in the right direction, but you would still be responsible for the implementation.

Thank you for your understanding.

[meranomaia]

Thank you very much, i understood.

One last question:

If i scroll down the sidebar, the sidebar becomes smaller, i suppose in order to make space for the scrollbar. Is it possible to keep the original width of the sidebar by adding some additional space for the scrollbar?

Best,

Martin

[Christian]

Hey Martin,

Please try adding the code below in your Appearance > Customize > Custom > CSS

.x-sidebar {
    width: 29.536945%;
}

Hope that helps. 🙂

[meranomaia]

Hi, i am sorry, that made it even worser 🙂

Please have a look, i left it online.

thanks

[Paul R]

Hi,

You may change the width 29.536945% to achieve your desired result.

Thanks

[Author]

Posts