Anchor with Position: Fixed

by shshaw

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js"></script>
<!-- IE Detection -->
<!--[if lt IE 7]>      <div class="lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <div class="lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <div class="lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <div class="not-ie"> <!--<![endif]-->

<div id="Header">
    <h1>Fixed Header</h1>
    <a href="#first">Semantic Anchor</a> | <a href="#second">.anchor Class</a> | <a href="#third">Semantic Anchor with <code>.anchor</code> class</a> | <a href="#fourth">Block Element</a> | <a href="#top">Return to Top</a>
</div><!-- #Header -->

<div id="Content">
    <a name="top" id="top"></a>
    <p class="Tagline"><strong>Chrome &amp; Safari</strong> work as expected. Semantic anchors with the <code>.anchor</code> class have a little extra spacing.</p>

    <p class="Tagline"><strong>Firefox</strong> works with the <code>.anchor</code> class, and falls back to default behavior with semantic anchors.Semantic anchors with the <code>.anchor</code> class have a little extra spacing.</p>
    
    <p class="Tagline">IE 7 has some oddities. Anchors weren't actually working, but that may have to do with <code>position:fixed</code> or <code>overflow</code>. The <code>.anchor</code> class causes the element to be expanded that height, but semantic anchors are hidden correctly.</p>
    
    <p class="Tagline">IE 8 works as expected, with a little extra spacing with semantic anchors than the <code>.anchor</code> class.</p>

        <p class="Fade">Vestibulum nunc massa, gravida quis porta nec, feugiat id metus. Nunc ac arcu dolor, quis vestibulum leo. Cras viverra mollis ipsum, non rhoncus lectus aliquam et. Morbi faucibus purus sit amet lacus aliquet elementum. Donec sit amet posuere enim. Cras in eros id tortor fringilla ultricies. Mauris faucibus ullamcorper velit, pulvinar varius odio eleifend eu. Quisque id odio metus. Morbi adipiscing ultricies posuere....

CSS

/* Necessary to prevent issues in Chrome with position: fixed
    https://code.google.com/p/chromium/issues/detail?id=95338
*/
html,
body { 
    height: 100%;
    overflow: auto;
}

#Header {
    display: block;
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    height: 100px;
    z-index: 1000;
}

/* * * * * * * * * * * * * * * * */
/*   Here's the code you want.   */
/* * * * * * * * * * * * * * * * */

    .anchor {
        display: block;
        height: 140px;
        margin-top: -140px;
        visibility: hidden;                
    }

    [name]:before { 
        content: "\0020";
        display: block;
        width: 0;
        height: 140px;
        position: relative;
        top: -140px;
        margin-top: -140px;        
                
    }

    .lt-ie9 [name]:before { top: 0px; }


/* * * * * * * * * * * * * * */
/*   Presentational Styles.  */
/* * * * * * * * * * * * * * */

body {
    background:#faf9fc;
    font-family: Helvetica;
    color:#59555A; 
}

#Header { 
    background: #464451;
    background: rgba(40,30,60,.9);
    color:#FFF;
    text-align: center; 
}
    #Header h1 { 
        font-size: 40px;
        margin-top:15px;
    }

    #Header a { color: #AA77CC; }


#Content { 
    padding: 140px 40px 40px;
    display: block;
    position: relative; 
    z-index: 1; 
}

    hr {
        margin: 40px 0;
        height: 0;
        border: none;
        border-bottom: dashed 1px #b5b0bc;
    }
    
    h2 { 
        font-size: 28px;
        background: #FFF;
        padding: 10px;
        border: dotted 1px #AA77CC;
        margin: 20px 0;
    }

    p { margin-bottom: 40px; }
    
    .Fade { color: #b5b0bc; }