Grow your CSS skills. Land your dream job.

Facebook like header with fixed position !

  • # October 4, 2012 at 12:43 am

    How can i make a _facebook_ like fixed header which is first displayed as menu , and after when we cross it’s division (or watever) by scrolling, the menu gets fixed at the top of the screen !
    If there is a name for this particular ‘thing’ plz do inform me.

    And if i have recreated this topic than i m really sorry, u can just provide me the link of the respective discussion thread.

    # October 4, 2012 at 12:45 am

    by ‘menu’ i meant it is at some specific height in the page with respect to the TOP of the page.

    # October 4, 2012 at 3:02 am

    JavaScript version:






    CSS version:

    .sticky {
    position: -webkit-sticky;
    position: -moz-sticky;
    position: -ms-sticky;
    position: -o-sticky;
    top: 15px;
    }

    Support right now is Chrome 23.0.1247.0+ (current Canary) and WebKit nightly.

    More informations here: http://updates.html5rocks.com/2012/08/Stick-your-landings-position-sticky-lands-in-WebKit

    # October 9, 2012 at 8:16 am

    Above solution is not working in IE.

    Here is fix for cross browser.

    http://viralpatel.net/blogs/demo/jquery/scroll-fix-header-facebook/

    # October 9, 2012 at 3:29 pm

    If it is already at the top of the page and you want to keep it there, use position: fixed. There shouldn’t be a need for any javascript/jquery.

    http://codepen.io/stevencrader/pen/vKesG

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".