In CSS, we have learned many things and there is a very unique concept of one of the property i.e position and its values i.e static, fixed, absolute, relative.

We all have gone through these properties but not the new value in the position property i.e sticky.

If a user wants to fix one of the section or a row or any part of his HTML as fixed after scrolling to an extend, he can simply do that with the help of position property.
 

Position : sticky

This property will enable you to make your element stick at the any portion of the the window.

Here is the code:

HTML:

<header>
	<ul>
		<li>home1</li>
		<li>home2</li>
		<li>home3</li>
		<li>home4</li>
		<li>home5</li>
		<li>home6</li>
	</ul>
</header>
<section>
	<header></header>
	<aside>
		Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
		tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
		quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
		consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
		cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
		proiden.
	</aside>
	<footer>
		<ul>
			<li>home1</li>
			<li>home2</li>
			<li>home3</li>
			<li>home4</li>
			<li>home5</li>
		</ul>
	</footer>
	<aside>
		Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
		proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
	</aside>
</section>
<footer>
	Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
		tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
		quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
		consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
		cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
		proident id est laborum.
</footer>

CSS:

header,footer{background: red; color: #fff;}
ul li{display: inline-block;}
section{ min-height: 500px; }
section footer{position: sticky; top:0;}

The difference between positions, fixed and sticky:

Fixed makes an element fixed at any position on the window and it won't move on scrolling. Means it dosent matter how you scroll upto bottom of the page it will remain fixed and its fixed position dose not effect other elements.

Sticky enables you to stick your element after a particular scroll.

Position:sticky is very new element introduced, the more changes can be expected in near future to it.

You can have a look at the demo attached.