Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Use Position Property-Sticky to Make an Element Stick at Any Portion of the Window

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 1
    • 0
    • 34
    Comment on it

    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.

     

    Use Position Property-Sticky to Make an Element Stick at Any Portion of the Window

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: