How to hide the block when scrolling the page?

Question

JavaScript

Hello!

Using vkontakte, I noticed a handy thing: when scrolling the feed (of a community), when the right column disappears from view (in which the community avatar, subscribers, contact information, etc.), the main content becomes full width. Very convenient in my case.

Let's say we have a two-column website that is 1000px wide. In the left column, let's call it #content, we have the content of the article (its width is 700px). In the right column, let's call it #sidebar, we have links to related articles, ads, etc. (its width is 300px). But: since the article is large, we got, for example, that the height of the left column is 3000px, and the right one is only 500px. Those. when scrolling the page, when the sidebar is left somewhere at the top, we have a lot of free space on the right, which could be filled with text.

Hence the question: how to make it so that when the page is scrolled 500px down (assume - the height is always 500 and nothing needs to be varied "depending on the height"), we hide the #sidebar and the #content width changes from 700px to 1000px/100 %, but going back (when padding from the top of the site is 500px), #sidebar is back again and #content width is 700px again?

I understand that it is necessary to use js / jquery here, but I am not friends with these things.

Thanks in advance.

Answer 1

Whole
Code

Answer 2

Kind people!
But how to do the same thing, but only if the height of the block varies (that is, 500 can be 3000) ???
if ($(this).scrollTop() > 500) - what needs to be fixed here? What would the block become wider depending on the final height of the neighboring block?
All two blocks are of different height depending on content filling ( id="content" and id="sidebar").